吉林省住房建设安厅网站安全管理办法,网页设计图片之间空隙,网上商城如何推广,做网站工作的怎么填职务通过JavaScript#xff0c;我们可以给页面的某些元素添加事件的监听器#xff0c;当元素触发相应事件的时候监听器就会捕捉到这个事件并执行相应的代码。addEventListener() 方法实例当用户点击按钮时触发监听事件#xff1a;document.getElementById(myBtn).ad…通过JavaScript我们可以给页面的某些元素添加事件的监听器当元素触发相应事件的时候监听器就会捕捉到这个事件并执行相应的代码。addEventListener() 方法实例当用户点击按钮时触发监听事件document.getElementById(myBtn).addEventListener(click, displayDate);尝试一下 »addEventListener() 方法用于向指定元素添加事件句柄。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。你可以向一个元素添加多个事件句柄。你可以向同个元素添加多个同类型的事件句柄如两个 click 事件。你可以向任何 DOM 对象添加事件监听不仅仅是 HTML 元素。如 window 对象。addEventListener() 方法可以更简单的控制事件冒泡与捕获。当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来可读性更强 在没有控制HTML标记时也可以添加事件监听。你可以使用 removeEventListener() 方法来移除事件的监听。语法 element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 click 或 mousedown).第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。注意:不要使用 on 前缀。 例如使用 click ,而不是使用 onclick。向原元素添加事件句柄实例当用户点击元素时弹出 Hello World! :element.addEventListener(click, function(){ alert(Hello World!); });尝试一下 »你可以使用函数名来引用外部函数:实例当用户点击元素时弹出 Hello World! :element.addEventListener(click, myFunction);function myFunction() { alert (Hello World!);}尝试一下 »向同一个元素中添加多个事件句柄addEventListener() 方法允许向同个元素添加多个事件且不会覆盖已存在的事件实例element.addEventListener(click, myFunction);element.addEventListener(click, mySecondFunction);尝试一下 »你可以向同个元素添加不同类型的事件实例element.addEventListener(mouseover, myFunction);element.addEventListener(click, mySecondFunction);element.addEventListener(mouseout, myThirdFunction);尝试一下 »提示你可以在本站的 HTML DOM addEventListener() 方法部分获得更多有关addEventListener()方法的信息向 Window 对象添加事件句柄addEventListener() 方法允许你在 HTML DOM 对象添加事件监听 HTML DOM 对象如 HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。实例当用户重置窗口大小时添加事件监听window.addEventListener(resize, function(){ document.getElementById(demo).innerHTML sometext;});尝试一下 »传递参数当传递参数值时使用匿名函数调用带参数的函数实例element.addEventListener(click, function(){ myFunction(p1, p2); });尝试一下 »事件冒泡或事件捕获事件传递有两种方式冒泡与捕获。事件传递定义了元素事件触发的顺序。 如果你将 p 元素插入到 div 元素中用户点击 p 元素, 哪个元素的 click 事件先被触发呢在冒泡中内部元素的事件会先被触发然后再触发外部元素即 p 元素的点击事件先触发然后会触发 div 元素的点击事件。在捕获中外部元素的事件会先被触发然后才会触发内部元素的事件即 div 元素的点击事件先触发 然后再触发 p 元素的点击事件。addEventListener() 方法可以指定 useCapture 参数来设置传递类型addEventListener(event, function, useCapture);默认值为 false, 即冒泡传递当值为 true 时, 事件使用捕获传递。实例document.getElementById(myDiv).addEventListener(click, myFunction, true);尝试一下 »提示DOM事件流同时支持两种事件模型捕获型事件和冒泡型事件捕获型事件首先发生。捕获型事件和冒泡型事件会触及DOM中的所有对象从document对象开始也在document对象结束。removeEventListener() 方法removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:实例element.removeEventListener(mousemove, myFunction);尝试一下 »浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。方法addEventListener()1.09.01.01.07.0removeEventListener()1.09.01.01.07.0注意 IE 8 及更早 IE 版本Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:element.attachEvent(event, function);
element.detachEvent(event, function);实例跨浏览器解决方法:var x document.getElementById(myBtn);if (x.addEventListener) { // 所有主流浏览器除了 IE 8 及更早版本 x.addEventListener(click, myFunction);} else if (x.attachEvent) { // IE 8 及更早版本 x.attachEvent(onclick, myFunction);}尝试一下 »
