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

　　普通事件指的是可以用来注册的事件；

　　事件绑定是指把事件注册到具体的元素之上。

通俗点说：

　　普通事件：给html元素添加一个特定的属性(如：onclick)；

　　事件绑定：js代码中通过标记（id  tag class）获取元素，给元素添加特定的方法(如：onclick)；

扩展：事件监听addEventListener事件可以绑定多次事件，并进行触发

div1.onclick = function(){};

<button onmouseover = "  "></button>

　　1、如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面的绑定
　　2、不支持DOM事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段

addEventListener
　　? 如果说给同一个元素绑定了两次或者多次相同类型的事件，所以的绑定将会依次触发
　　? 支持DOM事件流的
　　? 进行事件绑定传参不需要on (在我们前端)

addEventListener(“click”,function(){},true);   //此时的事件就是在事件冒泡阶段执行

兼容性处理

ie9开始   到ie11 edge：addEventListener

ie9以前：attachEvent/detachEvent

　　? 进行事件类型传参需要带上on前缀
　　? 这种方式只支持事件冒泡，不支持事件捕获

比较attachEvent 和 addEventListener:

  • attachEvent只支持事件冒泡  addEventListener既支持事件冒泡，也支持事件捕获
  • 参数： attachEvent事件类型需要on前缀， addEventListener事件类型不需要on前缀
  • 如果使用attachEvent对一个元素的目标阶段绑定了多次事件，那么会按照绑定顺序的相反顺序进行触发；如果使用addEventListener对一个元素的目标阶段绑定多次事件，那么会按照绑定顺序进行触发
时间： 2024-10-31 02:32:03

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

jQuery中的live绑定多个事件整理

在1.4.0之前(不包含1.4.0)无法使用多个绑定的,单个示例为: $('.clickme').live('click', function() { // Live handler called. }); 1.4.0-1.4.2开始支持了,实例如下: $('.hoverme').live('mouseover mouseout', function(event) { if (event.type == 'mouseover') { // do something on mouseover }

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

普通添加事件的方法: 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

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

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

使用call、apply和bind解决js中烦人的this，事件绑定时的this和传参问题

1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我们来一起看一段代码: // 作为对象方法调用 var test = { a : 5, b : 6, sum : function () { return this.a + this.b; // 此处this = test } } alert(test.sum()); // 11 作为对象调用时thi

jQuery中bind函数绑定多个事件

名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleave", function() { $(this).toggleClass("entered"); }); 在1.4版本以后,也可以如下绑定 $("#foo").bind({ click: function() { // do something on clic

js中this的绑定规则及优先级

一.   this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { console.log(this.a); } var a = 1; foo(); // 2 调用foo的时候,this应用了默认绑定,this指向了全局对象,但是在严格模式下,那么全局对象将无法进行默认绑定,因此this会绑定到undefined function foo() { 'use strict';

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

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

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

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

js中的前期绑定，后期绑定以及问题

javascript 的函数在执行期间才会确定他的context,也就是说this在此时被赋值. 但是你常常遇到这种情况 function process(){ this.name = "hello"; document.onclick = function(){ alert(this.name); } } var  p = new process(); ------------------------------------- 上面这个 程序执行之后,你在页面上"点击&qu