首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浅谈JavaScript的事件(事件处理程序)

事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover,都是事件的名字。而响应某个事件的函数就叫事件处理程序。...事件处理程序的名字以“on”开头,比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。...如果要更换事件处理程序就需要改动两个地方:JavaScript和HTML。 DOM级事件处理程序   通过JavaScript指定事件处理程序的传统方式是将一个函数赋值给事件处理程序属性。...所有DOM节点都包含这两个方法,并且他们接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。...在attachEvent的事件处理程序函数中this是指向window的,我们无法获取元素对象。

1.5K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript事件处理程序

    ---- theme: channing-cyan 这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战 事件处理程序 事件就是用户或者浏览器执行的某种操作。...我们常用的点击,滚动视口,鼠标滑动都是事件,为响应事件而调用的函数被称为事件处理程序,在js中事件处理程序的名字以 on 开头。 html事件处理 我们都知道js代码也可以写在html元素标签内部。...DOM事件处理 DOM2规范为事件处理程序定义了俩个方法,一个是赋值addEvenTListener()一个是移除removeEventListener()。...这俩个方法接受三个参数,事件名、事件处理函数、布尔值。 布尔值true表示在捕获阶段执行,false(默认)表示冒泡阶段执行。...ie事件处理 ie浏览器也弄了一个类似我们刚刚DOM2规范的方法,attachEvent()和detachEvent(),注意这俩个方法接收俩个参数,它不支持捕获操作,所以只接收事件处理名称和函数。

    52810

    JavaScript事件对象与事件处理程序

    一、事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。...既然event是事件对象,那么它必然存在属性   ①DOM中的事件对象event属性   (1)、type属性用于获取事件类型   (2)、target、srcElement事件>...属性用于获取事件目标   (3)、stopPropagation()方法 用于阻止事件冒泡   (4)、preventDefault() 方法 阻止事件的默认行为 二、DOM2级事件处理程序...  (1)、addEventListener() 用于处理指定事件处理程序操作  (2)、removeEventListener() 用于处理删除事件处理程序操作 三、IE事件处理程序   (1...)、attachEvent() 用于处理指定事件处理程序操作  (2)、detachEvent() 用于处理移除事件处理程序操作

    80930

    this 指向4 — 事件处理函数中的 this

    本文继续讨论 this 指向 问题,今天讨论: 事件处理函数中的 this 文末尾有关于this的面试题,可直接查看 0 1 事件处理函数中的 this 示例1: <button id="btnTest....addEventListener('click',handleClick) function handleClick(){ console.log(this); } 结果均为: 触发事件的...console.log(this.a ,this.b); } window.Plus = Plus; })(document) new Plus(3,4); 结果为: 总结 : 事件函数处理内部的...this, 总是指向被绑定的DOM元素 0 2 改变函数内部this指向 问题:如何让 handlerBtnClick 内this指向类的实例 方法一: oBtn.addEventListener('...,大家应该比较了解吧, 下面我们就来看一道关于 this 的面试题 以下输出的值,并简述 var foo={ bar:function(){ console.log(this

    84620

    详解JavaScript事件处理程序

    当元素发生了某个事件,不仅会执行本元素的事件处理程序,还会一直向上寻找所有父元素对应的事件处理程序并执行。...2、事件委托 让父元素监听执行子元素的某个事件,原理:子元素没有注册事件处理程序,事件会冒泡向上寻找相应执行程序。...1、EventTarget.addEventListener 功能:将 回调函数 和 元素事件 进行绑定,当事件发生时,回调函数会被执行。...el.addEventListener("click", clickTest); 2、EventTarget.removeEventListener 删除用 EventTarget.addEventListener 注册的事件处理程序...alert("not cancelled"); } } 六、查看所有可用事件 所有可用事件这里 查看>>> 七、参考文档 详解JavaScript事件处理程序

    85800

    正确调用事件处理程序

    下面这段代码是大部分开发人员经常使用的定义事件处理程序的方法。...,当在对象上触发 demo 事件时并没有关联的事件处理程序的话,C# 将会用 null 值来表示没有处理程序与该事件相关联,进而将会引发 NullReferenceException 异常。...=null)时发现 demo 不等于 null ,正巧这时线程 B 将唯一的事件处理程序解除了订阅,这时线程 A 再调用 demo 时事件处理程序已经变为了 null ,进而导致 NullReferenceException...=null) { handler(this); } } 上述这种方法是对等号右侧的内容进行了浅拷贝创建了新的引用,使其指向原来的事件处理程序(相当于给事件订阅者生成了一个快照...),当另一个进程注销掉事件处理程序时,注销的只是 demo 上所绑定的处理程序,因此当当前的线程执行 handler 时是不会出现 NullReferenceException 异常。

    86210

    CA2109:检查可见的事件处理程序

    只要处理程序和事件签名匹配,就可以将调用公开方法的事件处理程序(委托类型)添加到任何事件中。 事件可能由任何代码引发,并且经常由高度可信的系统代码引发,以响应用户操作(例如单击某个按钮)。...向事件处理方法添加安全检查不会阻止代码注册调用方法的事件处理程序。 需求无法可靠地保护由事件处理程序调用的方法。 安全需求通过检查调用堆栈上的调用方,帮助防止代码受到不可信任的调用方利用。...事件处理程序的方法运行时,将事件处理程序添加到事件的代码不一定会出现在调用堆栈上。 因此,在调用事件处理程序方法时,调用堆栈可能仅具有高度受信任的调用方。 这会使事件处理程序方法提出的需求成功。...检查代码时,请考虑以下问题: 你的事件处理程序是否执行任何危险或可利用的操作,如断言权限或禁止非托管代码权限? 由于代码可随时仅通过堆栈上高度受信任的调用方运行,因此与代码之间有何安全威胁?...如何解决冲突 若要解决此规则的冲突,请检查方法并评估以下各项: 是否可以将事件处理方法设为非公开? 是否可以将所有危险功能移出事件处理程序? 如果提出了安全需求,是否可以通过其他方式实现?

    53300

    Laravel 5.0 之事件及处理程序

    借助 Laravel 5 的命令(及命令处理程序),你可以通过封装的方式非常简单、直接地向系统发出命令。...绑定事件 在上一个步骤中我们创建了一个事件及其处理程序,但仅仅是创建,并没有通知事件总线(bus)我们刚才创建的事件和处理程序是配对的。...要注意的是这里只有简单的 PHP 类,所以你可以手动实例化事件,实例化事件对应的处理程序,然后把事件传递给处理程序。...;也可以给你的事件处理程序加上 Illuminate\Queue\InteractsWithQueue 的 trait,使事件处理程序的 handle 方法变得容易从外部访问,从而使事件处理程序可以和事件队列进行交互...在本文写作时,生成的时间代码实际上已经默认包含了这部分。 写在最后 就这么多了。只要你理解了 Laravel 5 的命令和处理程序,掌握事件处理机制就是一件非常容易的事了。

    1.2K50

    【Web APIs】JavaScript 事件基础 ① ( JavaScript 事件简介 | “ 事件 “ 概念 | “ 事件 “ 三要素 - 事件源 事件 事件处理程序 | 事件类型 )

    , 并针对该行为触发对应的动作 ; " 事件 " 是 用户 与 HTML 网页 交互时触发的 , 如 : 鼠标点击 , 鼠标移动 , 键盘按键 , 表单提交 , 文件加载 等 动作 ; " 事件处理程序..." ( Event Handlers ) 是 JavaScript 脚本中处理 " 事件 " 的函数 , 在该函数中可以针对用户的 不同的动作 做出不同的响应 ; 在网页中 , 每个 HTML 标签元素...都可以触发 JavaScript 事件 , 如 : 点击 某个 标签元素 , 弹出对话框 ; 2、" 事件 " 三要素 - 事件源 / 事件 / 事件处理程序 " 事件 " 三要素 : 事件源 Event...; }); 事件处理程序 Event Handler : 定义事件发生时的响应行为的函数 , 事件发生时 , 浏览器会调用相应的事件处理程序来处理事件 ; function handleClick(event...为 Click me 标签设置点击事件 , 这是 " 事件源 " ; 事件类型为 click 类型 , 是 点击事件 ; 事件处理程序是下面的函数

    14910

    【如果你要学JS⑧】——事件三要素,事件处理程序

    1.事件三要素1.事件源:事件被触发的对象2.事件类型:如何触发 什么事件 比如鼠标点击(onclick),鼠标经过亦或是键盘按键3.事件处理程序:通过一个函数赋值的方式完成2.执行事件步骤1.获取事件源...2.绑定事件(或注册事件)3.添加事件处理程序 像素人是谁?...(或注册事件)butn.onclick //3.添加事件处理程序 butn.onclick = function () { alert('像素人是一名前端...') } 3.常见的鼠标事件 4.操作元素JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容...but.onclick = function () { div.innerText = gettime(); } //封装一个函数用来获取当前时间

    61710

    Android事件处理方法总结-基于回调的事件处理

    一、Android中的事件处理方法 事件处理:响应用户UI动作,提高应用程序交互性 1、基于监听的事件处理机制 2、基于回调的事件处理机制 3、Handler消息处理 前面我们已经介绍了 Android...事件处理方法总结-基于监听,这里我们总结一下 Android事件处理方法总结-基于回调 二、基于回调的事件处理机制详解 1、回调事件处理原理 监听事件处理是事件源与事件监听器分开的 而基于回调的事件处理...UI组件不但是事件源,而且还是事件监听器,通过组件的相关回调方法处理对应的事件 2、回调事件应用步骤 Ⅰ....自定义View类,继承自需要的View UI类。ex :自定义 MyButton按钮类 extends 基础Button类 Ⅱ. 复写回调函数。...,具体参考API文档 3、回调事件应用示例 demo:点击按钮后,Toast弹出按钮被触碰的事件信息 自定义View类 MyButton,并重写事件回调方法 package com.yihui.ui;

    1.5K30

    【FFmpeg】SDL 音视频开发 ③ ( SDL 事件处理 | SDL_Event 数据结构分析 | 事件处理流程 | SDL 事件获取函数 | SDL_WaitEvent 函数 )

    事件处理引入 SDL , Simple DirectMedia Layer , 是 跨平台的多媒体开发库 , 用于开发 跨平台 的 多媒体应用程序 , 可开发 WIndows / Linux / MacOS...键盘 / 鼠标 ) 传入的事件 , 如 鼠标移动 , 鼠标点击 , 键盘按键 等事件 ; 2、SDL 事件处理步骤 SDL 事件处理步骤 : 首先 , 调用 SDL_Init 函数 , 初始化 SDL...函数 是 非阻塞函数 , 如果没有事件发生 , 则立刻返回 , 不会阻塞程序执行 ; 与之相对的是 SDL_WaitEvent 函数 , 该函数会阻塞程序 , 等待事件发生 ; SDL_PollEvent...将 SDL_Event 变量地址传入 SDL_PollEvent 函数 ; 最后 , 根据 SDL_PollEvent 函数的返回值 , 决定是否处理事件 ; 如果返回 1 , 则处理事件 ;...函数 , 传入 SDL_Event 变量的地址 , 使用 取地址符 & 获取变量地址 ; 调用了 SDL_WaitEvent 函数后 , 会阻塞当前的程序 , 直到 事件发生 , 解除阻塞继续执行 ;

    17510
    领券