DOM的绑定事件事件

DOM事件的绑定

DOM 事件允许javascript在html中注册不同事件的处理程序

事件通常于函数结合使用，函数不会在事件发生前执行！

事件

事件是浏览器默认具备行为，不论是否基于js的绑定方法，事件都是存在的，只要相关的行为触发（点击），相关的事件（点击事件）就会触发。

在网页开发的过程中经常会有交互操作，比如点击一个DOM元素，需要让js对该操作做出相对应的响应，这就需要对DOM元素进行绑定来进行处理， js通常有三种常用的方法进行绑定：

在DOM元素中直接绑定

在javascript中直接绑定

绑定事件监听函数

第一种方法：在DOM元素中直接绑定

因为多元素绑定相同事件时 效率低，所以不建议在HTML中写 javascript代码。

第二种方法：在javascript中直接在脚本语言中绑定

设置一个点击按钮 当客户点击这个按钮的时候，网页就会出现一个弹出框 ，
事件处理程序的名字以on开头 click => onclick,load => onload.

第三种方法：绑定事件监听函数

事件的监听

 btn.addEventListener("click",clickOne); function clickOne(){alert('关关雎鸠，在河之洲。');}ne

移出事件的监听

 btn.addEventListener("click",clickOne)function clickOne(){alert('关关雎鸠，在河之洲。');//移除事件  以及移除事件的方法this.removeEventListener("click",clickOne);}

区别说明：

方式1和方式2 是我们经常用到的，既然有着两种方法了为什么还要有第三种呢？

答案是这样的：

用“addEventListener” 可以绑定多个同一事件，且都会执行，在DOM结构如果绑定两个“onclick”事件，只会执行第一个。在脚本通过匿名方式绑定的只会执行最后一个事件。

entListener” 可以绑定多个同一事件，且都会执行，在DOM结构如果绑定两个“onclick”事件，只会执行第一个。在脚本通过匿名方式绑定的只会执行最后一个事件。

DOM的绑定事件事件相关推荐

js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习
dom基础 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
dom绑定click事件无效及解决办法
一般情况下在同一个界面里面基本不会绑定无效的 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
Visual Event插件----查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试我们可以使用firefox的debug工 ...
JavaScript绑定键盘事件的多种写法
使用JavaScript来绑定键盘事件时,有多种写法,而他们的实现效果实际上是等价的,下面一一来列举. 方式一: function keyboard() {document.onkeydown = f ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】
JS-WEB-API 提问 DOM BOM 事件 Ajax 存储从JS基础知识到JS-WEB-API JS基础知识 JS-WEB-API DOM(Document Object Model) DOM ...

DOM的绑定事件事件

DOM事件的绑定

事件

区别说明：

DOM的绑定事件事件相关推荐

最新文章

热门文章