EventListener
来源:互联网 发布:2017淘宝女装销售冠军 编辑:程序博客网 时间:2024/05/16 07:20
addEventListener() 方法
document.getElementById("id").addEventlistener("click",displayDate);
在用户点击按钮时触发监听事件
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听。
语法
元素.addEventListener("动作",调用的函数,布尔值)
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
同时执行多个事件
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:
<button id="btn">click</button><script>
document.getElementById("btn").addEventListener("click",function1);
document.getElementById("btn").addEventListener("click",function2);
function function1() {
alert("hello")
}
function function2(){
alert("sorry")
}
</script>
点击按钮后弹出两个小窗口
可以向同个元素添加不同类型的事件:
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML = "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML = "Moused out!<br>"
}
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML = "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML = "Moused out!<br>"
}
传递参数
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。(即布尔值)
<div id="myDiv">
<p id="myP">点击段落,我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">点击段落,我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV2 元素 !");
}, true);
</script>
<p id="myP">点击段落,我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">点击段落,我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV2 元素 !");
}, true);
</script>
取消EventListener的方法
removeEentListener("行为",方法);
例
element.removeEventListener("mousemove", myFunction);
0 0
- EventListener
- EventListener
- jdk --EventListener
- DOM EventListener
- java.util.EventListener翻译
- EventListener,监听注册
- cocos2dx-3.0 : EventListener
- Cocos2d-x3.0 EventListener
- 10024---JavaScript--EventListener
- JavaScript HTML DOM EventListener
- UNITY之EventTrigger,EventListener
- java.util.EventListener使用
- javascript之DOM EventListener
- EventListener的add和remove
- JavaScript 之HTML DOM EventListener
- js给eventListener传递参数
- Spring源码解读:EventListener接口
- JS学习(13)----eventlistener
- 初识XML
- 邮件原理你真的造吗
- Java集合框架-Java中的HashMap和HashTable到底哪不同?
- Google Project Zero简单记录
- 排队取水
- EventListener
- PAT乙级1053
- FusionCharts图表开发
- 1.编程实现: 两个int(32位)整数m和n的二进制表达中,有多少个位(bit)不同?
- Python 实现堆排序
- JSTL-格式化标签库
- Spring 3.x企业开发(二)之IOC控制反转
- android开发中Fingerprint模块浅析
- 大二用C++写的图邻接矩阵表示法