js添加事件监听的方式与this

<div id="box1" onclick="alert('Hello,小潘')"></div>

在标签中调用自定义函数

<div id="box1" onclick="Hello()"></div>
<script>
function Hello () {
alert('Hello,小潘');
}
</script>

DOM0级事件处理程序

这种方式也是早期的写法,但好处是可以讲js和html完全分离,前提是需要给html元素提供一个额外的id属性(或其它能获取该元素对象的方式)

<div id="box1" ></div>
<script>
var box1 = document.getElementById("box1");
box1.onclick = function () {
alert("Hello,小潘")
}
</script>
 box1.onclick = function () {
alert("Hello,小潘!")
}

则前面的事件会被后一个事件覆盖
如果想要清除该事件,则加以下代码即可

box1.onclick = null;

DOM2级事件处理程序

这是目前最流行的事件处理程序,各大主流浏览器全部支持

<div id="box1" ></div>
<script>
//添加事件监听器
//元素节点.addEventListener("事件名", 响应事件的函数, 布尔值)
//事件名 click mouseover mouseout
//函数名或者匿名函数
//事件流 false
var box1 = document.getElementById("box1");
box1.addEventListener("click", function() {
alert("Hello,小潘");
}, false)
</script>

即使后面再加同样的事件监听器也不会将前面的覆盖
清除事件

<div id="box1" ></div>
<script>
//添加事件监听器
//元素节点.addEventListener("事件名", 响应事件的函数, 布尔值)
//事件名 click mouseover mouseout
//函数名或者匿名函数
//事件流 false
var box1 = document.getElementById("box1");
function Hello () {
alert("Hello,小潘");
}
box1.addEventListener("click",Hello, false);
//移除事件
//注意:
//1. 参数与添加事件时相同
//2. 添加事件时第二个参数不能是匿名函数
box1.removeEventListener("click",Hello, false)
</script>

this 代表谁?

  • 在标签中使用,代表的是标签本身
  • 在函数体中直接使用,代表window
  • 在标签中将this 作为实参传递到函数中,在函数体中使用形参代表标签本身
  • 在事件函数中使用,代表标签本身

js添加事件监听的方式与this的更多相关文章

  1. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  2. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  3. JS的事件监听机制

    很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套 ...

  4. GridView添加事件监听和常用属性解析

    1. 使用流程 graph LR 准备数据源-->新建适配器 新建适配器-->绑定数据源 绑定数据源-->加载适配器 2. 常用属性 android:columnWidth:每一列的 ...

  5. JS之事件监听

    一 如果事件监听类似于如下写法,则最终只会执行最后一个事件监听,其他监听都会被覆盖掉. window.onload=funtion(){console.log(1);}; window.onload= ...

  6. js实现事件监听与阻止监听传播

    监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...

  7. extjs组件添加事件监听的三种方式

    extjs对组件添加监听的三种方式  在定义组件的配置时设置 如代码中所示:  Java代码  xtype : 'textarea',  name : 'dataSetField',  labelSe ...

  8. OnTouchListener事件监听实现方式之GestureDetector

    当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等. 一般情况下,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouc ...

  9. Node.js之事件监听和发送

    演示事件的发送和监听 const events = require("events"); function Account() { this.balance = 0; events ...

随机推荐

  1. python序列的修改、散列和切片

    新Vector类 接原vector类定义的新Vector类,原向量类是二维,现定义多维向量类: from array import array import reprlib import math c ...

  2. JavaScript --css样式

    1.JavaScript显示隐藏控制 隐藏:display:none; 显示:display:block; 参考链接:https://blog.csdn.net/sleepwalker_1992/ar ...

  3. 小白学习Python英语基础差怎么办,都帮你想好拉!看这里

    运算符与随机数 1.module:模块 2.sys(system):系统 3.path:路径 4.import:导入 5.from:从- 定义函数与设定参数 1.birthday:出生日期 2.yea ...

  4. 国庆出游神器:魔幻黑科技换天造物,让vlog秒变科幻大片!

    摘要:国庆旅游景点人太多,拍出来的照片全是人人人.车车车,该怎么办?不妨试试这个黑科技,让你的出游vlog秒变科幻大片. 本文分享自华为云社区<国庆出游神器,魔幻黑科技换天造物,让vlog秒变科 ...

  5. JS中call,apply,bind的区别

    1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...

  6. Postman快速入门

        Postman是一款非常流行的支持HTTP/HTTPS协议的接口调试与测试工具,其功能非常强大,易用. 1 基础知识 1.1 下载与安装     Postman的安装步骤,本例以Windows ...

  7. Java集合——List,Set,Map总结笔记

    1. 集合 Collection 1.1 Java 集合框架 ​ ​ ​ ​ ​ ​ ​ ​ Java 集合框架位于 java.util 包中.Java 集合框架主要包括两种类型的容器,一种是集合(C ...

  8. 密码学系列之:加密货币中的scrypt算法

    目录 简介 scrypt算法 scrypt算法详解 scrypt的使用 简介 为了抵御密码破解,科学家们想出了很多种方法,比如对密码进行混淆加盐操作,对密码进行模式变换和组合.但是这些算法逐渐被一些特 ...

  9. Python中字符串常用方法

    capitalize() String.capitalize() 将字符串首字母变为大写 name = 'xiaoming' new_name = name.capitalize() print(ne ...

  10. ScatterLayout:分散布局在py中的引用

    """ ScatterLayout:分散布局 """ from kivy.app import App from kivy.uix.scat ...