javascript addeventlistener事件

2026-08-30

JavaScript addEventListener()事件监听方法

addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处理程序.您可以向一个元素添加许多相同类型的事件处理程序,即两个“单击”事件. 您可以将事件侦听器添加到任何DOM对象,而不仅仅是HTML元素.即window对象. addEventListener()方法可以更容易地控制事件对冒泡的反应. 使用addEventListener()方法时,JavaSc

Javascript事件模型系列（四）我所理解的javascript自定义事件

被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一段时间,好在最近这些事情都一件件趋于平息,我也有了精力继续写文章. 这个自定义事件其实是挺让我纠结的,首先自己平时从未使用过,只是有一次遇到一个问题有人指点说可以用自定义事件,才对这个东西有了印象.在网上搜“javascript自定义事件”,发现也有不少文章在写,不过说实话让我佩服的却一篇也没找到,

javascript通用事件封装

随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然当前存在大量的且功能强大的javascript库,但这些类库或者框架都经过函数封装,对于用户而言隐藏了内部实现机制(虽然可以查看和研究源代码,但是有多少童鞋能潜心研究呢?).定制或者构建一个自己的小javascript库,对于童鞋们提升前端开发水平来说,也具有重要的价值. 废话不多说,下面给出一个通

javascript的事件

前戏今天在博客中看到了javascript的事件机制,就自己试试写一个简单的冒泡捕获测试,但是测试结果出乎了我的意料,主要是自己原来对事件了解不是很清楚,现在写篇博客记录下. 基础先来看一下我在Aaron博客中截的一张图 DOM2中事件有三个阶段事件的捕获阶段事件的目标阶段事件的冒泡阶段事件的捕获阶段:是由document元素向发生事件的元素传递. 事件的目标阶段:是指在找到了发生事件的目标元素这个阶段,找到之后就会执行事件监听器.如果在目标元素上同时绑定捕获和冒泡阶段事件,事件的执

javascript对象事件绑定方法

javascript对象事件绑定方法今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.onclick=p.click.call(作用域对象); 发现事件方法在初始化的时候就触发了,而且绑定失败. 正确的写法 ojb.onclick=function(){ p.click.call(作用域对象); }; 其实这里和作用域无关,还是绑定方法不对.所以总结了下js的对象事件绑定方法 1.内联模型

attachEvent,addEventListener事件绑定

兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数). 1.绑定方法: //IE attachEvent(事件名, 函数) oBtn.attachEvent('onclick', aaa); oBtn.attachEvent('onclick', bbb); //FF addEventListener(事件名, 函数, 是否捕获 false) oBtn.addEventListener('click', aaa, false); oBtn.addEventListener('click'

[转]javascript指定事件处理程序包括三种方式：

javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序如: 代码如下: var btn=document.getElementById("mybtn"); //取得该按钮的引用 btn.onclick=function(){ alert('clicked'); alert(this.id); // mybtn 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理. 删除DOM0级方法指定的事件处理程序: btn.onclick=null; // 删除事件

JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数一.在DOM元素中直接绑定也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he

JavaScript的事件监听、捕获和冒泡

在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element.addEventListener(type, listener[, useCapture]); //IE6~8不支持 element.attachEvent('on' + type, listener) //支持IE6~10,IE11不支持 element['on' + type] = fu

javascript之事件绑定

曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处本文链接:javascript之事件绑定 1.原始写法 <div onclick="alert('you clicked me just now);'">click me</div> 在刚开始学习前端的时候,我们不免这么将事件绑定写在html中,后来我们想将html和js脚本进行分离便这么写 <div id="test">clic

理解的javascript自定义事件

理解的javascript自定义事件被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一段时间,好在最近这些事情都一件件趋于平息,我也有了精力继续写文章. 这个自定义事件其实是挺让我纠结的,首先自己平时从未使用过,只是有一次遇到一个问题有人指点说可以用自定义事件,才对这个东西有了印象.在网上搜“javascript自定义事件”,发现也有不少文章在写

JavaScript的事件机制

JavaScript的事件机制摘要事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细介绍JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流.事件处理程序绑定方式.事件对象如何理解事件? JavaScript与HTML之间的交互就是通过事件实现的. 事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间. 事件处理程序:又

走进javascript——DOM事件

DOM事件模型在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事件模型中,就比较复杂一些,它将不再是单纯的调用一下自身绑定的事件就完事了,它还拥有机会去处理它的祖先节点,在DOM2级事件模型中,它有一个事件传播过程,分为3个阶段,从"事件捕获"Document开始来到"目标节点"再从"目标节点"冒泡回Docume

JavaScript addEventListener 第三个参数

先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

JavaScript系列----事件机制

1.事件流 1.1.标准事件流所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件流. <!DOCTYPE HTML> <html> <body> <div> <button>click</button> </div> </body> </html> 在上面的代码中,如果点击按钮bu

JavaScript：事件对象Event和冒泡

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章中已经讲过事件的概念.这里讲一下注册事件的两种方式,我们以onclick事件为例. 方式一:onclick 举例: <body> <button>点我</button> <script> var btn = document.getElementsByTagName("button&qu

浅谈JavaScript的事件（事件处理程序）

事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如click事件的事件处理程序是onclick.为事件指定事件处理程序的方式有多种方式. HTML事件处理程序元素支持的事件,都可以使用与相应事件处理程序同名的HTML特性来指定.这个特性的值能支持一定的JavaScript代码.例如,在单击按钮的时候执行一些JavaScript代码. <div id=

jQuery 事件绑定和 JavaScript 原生事件绑定

总结一下:jQuery 事件绑定和 JavaScript 原生事件绑定及区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.on, 对应的解除监听的函数分别是 unbind.die.undelegate.off. live.delegate 不多用,在Jquery1.7中已经移除,这里不多说重点介绍 bind.on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的

JavaScript的事件概述以及事件对象，事件流

事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定回调函数的形式来处理事件,当指定事件触发以后我们的回调函数就会被调用,这样我们的页面就可以完成和用户的交互了. 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netscape Navigator 中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏览器都支持事件处理. Jav

深入研究JavaScript的事件机制

本篇开始将回顾下Javascript的事件机制.同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块.为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler. 先看看页面中添加事件的几种方式: 直接将JS代码写在HTML上测试:Nowamagic view source print? 1 <div onclick="alert('欢迎访问Nowamagic.net');">Nowamagic</div&g

javascript addeventlistener事件

热门专题