事件绑定和普通事件有什么区别

普通添加事件的方法:

var btn = document.getElementById("hello");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}
//执行上面的代码只会alert 2 

事件绑定方式添加事件:

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
    alert(1);
},false);
btn.addEventListener("click",function(){
    alert(2);
},false);
//执行上面的代码会先alert 1 再 alert 2

普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。

addEventListener不兼容低版本IE

普通事件无法取消

addEventLisntener还支持事件冒泡+事件捕获

时间: 2024-10-06 03:17:39

事件绑定和普通事件有什么区别的相关文章

事件绑定和普通事件的区别

普通添加事件的方法: var btn = document.getElementById("hello"); btn.onclick = function(){ alert(1); } btn.onclick = function(){ alert(2); } 执行上面的代码只会alert 2 事件绑定方式添加事件: var btn = document.getElementById("hello"); btn.addEventListener("clic

javascript事件绑定和普通事件的区别

区别就是:普通事件只支持单个事件,事件绑定可以添加多个事件. 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <button id="btn">button</butt

jquery事件函数和原生事件绑定函数中return false的区别

一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,今天就想看看dom中0级.1级.2级事件绑定事件的话,事件函数返回false会是个什么情况,看看是不是和jquery一个样:<!doctype html><html>        <head>                <meta charset='utf-8' />             

了解JQuery的事件绑定特性和事件命名空间机制,编写更好、更灵活的事件处理代码

JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显然给编程带来了极大的灵活性.下面就一起学习下,jquery事件处理的一些特性. 1.JQuery中事件可以重复绑定,不会覆盖. $("#button1").bind("click",function(){ alert("func1"); }); $("#button1&qu

关于js中对事件绑定与普通事件的理解

普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id  tag class)获取元素,给元素添加特定的方法(如:onclick): 扩展:事件监听addEventListener事件可以绑定多次事件,并进行触发 div1.onclick = function(){}; <button onmouseover = " "></but

Win7专业版系统下事件绑定的Command事件不执行

用MVVM模式做的项目,用ICommand命令绑定事件,代码如下: ViewModel 里定义命令:public ICommand RemoveCommand { get; private set; },构造里初始化命令:RemoveCommand=new RelayCommand(Remove,CanExecute); 以下是RelayCommand 的定义. public class RelayCommand : ICommand { #region Fields&Constructors

JS普通添加事件和事件绑定的区别

很简单,看代码. 普通添加事件的方法: var btn = document.getElementById("hello"); btn.onclick = function(){ alert(1); } btn.onclick = function(){ alert(2); } 执行上面的代码只会alert 2 事件绑定方式添加事件: var btn = document.getElementById("hello"); btn.addEventListener(&

JS事件绑定和普通添加事件的区别

一个很简单的示例. 普通添加事件的方法: var btn = document.getElementById("hello"); btn.onclick = function(){ alert(1); } btn.onclick = function(){ alert(2); } 执行上面的代码只会alert 2 事件绑定方式添加事件: var btn = document.getElementById("hello"); btn.addEventListener(

IE和DOM事件流、普通事件和绑定事件的区别

IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <button>click</button> </div> </body> 冒泡型事件模型:button->div->body (IE事件流) 捕获型事件模型:body->div->button (Netscape事件流) DOM事件模型:body-&g