JavaScript事件处理程序的3种方式

Myth丶恋晨 2022-07-17 01:09 246阅读 0赞

1.HTML事件处理程序

<input type="button" value="按钮" οnclick="alert('被触发')" >

注意：1.由于是在HTML中添加JavaScript，所以不能使用未经过转义的HTML语法字符

如：和号（&），大于小于号等.

2.事件处理程序在代码执行时，有权访问全局作用域中的任何代码.

缺点：就是与HTML过于紧密，代码改动或者事件改动需要更改的地方比较多

2.DOM0事件处理程序

<input type="button" id="btn">
    <script>
    var btn=document.getElementById("btn");
    btn.οnclick=function(){
    
    alert("我被触发");
    alert(this.id);
    }
    
    </script>

优势：函数赋值给一个事件处理程序的属性。

简单，跨浏览器。

注：可以通过this访问元素的任何属性和方法

3、DOM2级事件处理程序

var btn3=document.getElementById("btn3");
    btn3.addEventListener("click",function(){
    alert("我被触发了");
    
    
    },false);

基本格式：addEventListener("事件"，函数，是否冒泡还是捕获即false/true);

removeEventListener("事件"，函数，true/false);

注意：1.false和true的区别：

false从子集开始向上冒泡，先执行自己，在执行父集元素的事件

true 从父集开始捕获，先执行父集的事件，再执行子集的事件

2.遇到重复的事件如何处理

var btn3=document.getElementById("btn3");
    　　   btn3.addEventListener("click",showmsg,false);
    btn3.addEventListener("click",showmsg,true);

从上往下执行。

持续更新...

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript中的事件流和事件处理程序

1、事件流 Javascript和HTML的交互是通过事件实现的。事件代表文档或浏览器窗口中某个有意义的时刻。事件流描述了页面接收事件的顺序。 1.1 事件冒泡

Dear 丶/ 2022年11月11日 13:19/ 0 赞/ 231 阅读

相关 javascript添加HTML事件处理程序的两种方式学习

以按钮单击事件为例；可以直接在button元素的onclick属性中直接执行javascript代码；示例代码和结果如下图； ![watermark_type_ZmFuZ

深碍√TFBOYSˉ_/ 2022年10月07日 11:57/ 0 赞/ 183 阅读

相关浅谈JavaScript中的五种为事件指定处理程序的方式

JavaScript和HTML之间的交互是通过事件实现的。 IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分，IE

偏执的太偏执、/ 2022年10月01日 00:51/ 0 赞/ 134 阅读

相关 JavaScript权威指南_169_第17章_事件处理_17.3-调用事件处理程序-事件传播、事件取消

![Center][] [Center]: /images/20220731/8ffec359dcb34461ac8b8e87ca715ea1.png

逃离我推掉我的手/ 2022年08月09日 06:56/ 0 赞/ 140 阅读

相关 javascript事件处理程序

javascript 事件处理程序 1、普通事件处理程序 <input type="button" value="click me" οncli

落日映苍穹つ/ 2022年08月01日 13:59/ 0 赞/ 226 阅读

相关 JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。在J

灰太狼/ 2022年07月17日 04:27/ 0 赞/ 174 阅读

相关 JavaScript事件处理程序的3种方式

1.HTML事件处理程序 <input type="button" value="按钮" οnclick="alert('被触发')" > 注意：1.由于是在HT

Myth丶恋晨/ 2022年07月17日 01:09/ 0 赞/ 247 阅读

相关读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得

今天读了《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）部分的内容，总结一些自己的心得：事

电玩女神/ 2022年06月01日 13:11/ 0 赞/ 212 阅读

相关 JavaScript跨浏览器事件处理程序、事件对象

var EventUtil = { addHandler:function(element,type,handler){ if(

电玩女神/ 2022年05月29日 14:07/ 0 赞/ 236 阅读

相关 javascript中继承的3种方式

function S() { this.name = "sss"; } S.prototype.say = function() {

叁歲伎倆/ 2022年05月28日 03:35/ 0 赞/ 217 阅读