dom addeventlistener与id 绑定事件的区别

文档中有写。

//addEventListener() 方法用于向指定元素添加事件句柄。

//提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

//Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。

//语法
element.addEventListener(event, function, useCapture)

event    必须。字符串,指定事件名。

注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 

提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。
function    必须。指定要事件触发时执行的函数。 

当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture    可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

我们可以为一个id绑定多个事件或者多个相同的事件,且不会覆盖,而JQuery绑定事件会进行覆盖,后者覆盖前者。

转载:http://www.cnblogs.com/zqzjs/p/4423280.html

时间: 2024-08-27 11:06:34

dom addeventlistener与id 绑定事件的区别的相关文章

Dom addEventlistener与id 绑定事件的区别(续)

addEventListener 第三个参数为 useCapture. 以一个例子说明. <div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="div2" style="background: red;width: 70px; height: 70px;"> <div id="div3

js 绑定事件的几种方法 addEventListener()

看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加事件的几种方法</title> <style type="text/css"> div{ width: 200px; height: 100px; background: #CCCCCC; border: 1px solid #008000; /*dis

Jquery绑定事件(bind和live的区别介绍)_jquery

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

jQuery使用向DOM元素绑定事件实现程序

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 使用click.change.mouseout等  代码如下 复制代码 <html> <head> <meta http-equiv="Content-Type

关于动态生成dom绑定事件失效的原因及解决方法_jquery

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

JQuery为页面Dom元素绑定事件及解除绑定方法_jquery

1.绑定事件 复制代码 代码如下: $('#id').bind("click",function(){ ... }) 可一次性绑定多个事件 复制代码 代码如下: $('#id').bind("click mouseover mouseout",function(){ ... }) 2.解除绑定 复制代码 代码如下: $('#id').unbind("click") 3.绑定一次 复制代码 代码如下: $('#id').one("clic

javacsript绑定事件的三种方式与各自特点

javacsript绑定事件的三种方式与各自特点 1. 在HTML中直接绑定 <input type="button" value="Click me!" onclick="doSomething();" /> 在HTML中绑定函数还有两种方式:原生函数和自定义函数(原文链接:链接)   当JavaScript代码偏少的时候,这种方式还能勉强接受.当代码规模变大的时候,这种方式明显地带来很多不方便的东西.例如修改行为的时候还需要去修改

jquery对象无法绑定事件

问题描述 function (objs) { if (objs.attr('name') == 'head') { objs.click(function () { alert('number'); }); } else { alert(objs.html()); objs.click(function () { alert('number1'); }); } }传入一个 jquery对象给objs后 可以输出这个对象的html 却不能绑定后面的click事件了 什么原因?其他任何地方都没有消除

JavaScript中利用jQuery绑定事件的几种方式小结_jquery

开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式: 先写几个好看的button //引入JQuery <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <span id="tips"></span> <input type="button" id="btn1"