为什么说 onclick 只能得到冒泡阶段

2024-11-01

关于JS 事件冒泡和onclick,click,on()事件触发顺序

今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox. 查看JQgrid源码,发现它的click事件是绑定到了table上,然后判断事件点击目标,找到选中行给它勾选:而我的click事件是绑定到td里面的div中. 按照事件冒泡的触发顺序,应该是我的事件先触发,之后是JQgrid的事件. 结果不是这样的.我发现JQgrid使用$().click(fu

js事件的捕获和冒泡阶段

讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到ParentNode. <div id="ancestor"> <button id="child"> Open the console and click me </button> </div> 以上的HTML代码在IE内核下,事件是这样传播的:{ 1.Butto

探讨Js的事件的冒泡阶段

近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢? 从概念上来说,事件的捕获就是从最外层也就是从html标签开始向内一层层的寻找目标元素,直到捕获到目标为止.而事件的冒泡就是从目标开始,向上一层层的冒泡,直到最上一级为止. 单从概论上来说,可能不是那么的清楚,所以我们直接上代码. <div id="div1"> <di

JavaScript进阶内容——DOM详解

JavaScript进阶内容--DOM详解当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了首先我们思考一下:JavaScript是用来做什么的? JavaScript诞生就是为了能够让它在浏览器中运行那么DOM就是我们学习中不可或缺的一个环节,下面让我们深入了解DOM DOM简介 DOM定义: 文档对象模型(DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口 DOM作用: 用来修改网页内容,结构和样式 DOM树: 我们用一个图片

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段本文主要解决的问题: 事件流 DOM事件流的三个阶段先理解流的概念在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

Event（事件）的传播与冒泡

特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome.safari.opera.firefox都支持cancelBubble属性. Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能

Javascript中addEventListener和attachEvent的区别

在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEventListener,现在IE9+,chrome,firefox等都支持. 所有的DOM节点包含addEventListener,并且接受3个参数: HTMLElement.addEventListener(type,function,bool); type:处理事件的名称,如 "click&quo

js事件绑定

事件绑定,常见的是odiv.onclick=function(){..........}; 这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这里要说的是addEventListener方法,和IE下的attachEvent方法: html代码如下: <html> <head> </head> <style> #box{ height:400px; width:400px; background: re

addEventListener 与attachEvent

第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_myDiv"); //找到对象 oDiv.onclick = function(){ //设置事件监听函数 alert("click"); }} 缺点:1.添加单一事件 2.不能删除事件第二:IE中监听函数 var oDiv; function fnClick(){ alert

DOM实战

作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正视频来源:https://www.bilibili.com/video/av26087098 DOM 课程内容介绍 1.1 DOM与BOM的概念文档结构树 BOM与DOM完整结构图 document对象示例代码 document <script> // document.URL 可以获取当前文档的地址 console.log( wi

fastclick源码分析

https://www.cnblogs.com/diver-blogs/p/5657323.html 地址 fastclick.js源码解读分析阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生背景与使用在解读源码前,还是简单介绍下fastclick: 诞生背景我们都知道,在移动端页面开发上,会出现一个问题,click事件会有300ms的延

如何优雅的封装一个DOM事件库

1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级事件只能给元素的某一个行为绑定一次方法,第二次绑定会把前面的覆盖掉. DOM 2级事件是让DOM元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法来实现的. DOM 2可以给某一个元素的同一个行为绑定多个不同的方法 //实例 1 obj.addEven

前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(上)

第1章.基础篇(上) Abstract:文档树.节点操作.属性操作.样式操作.事件 DOM (Document Object Model) - 文档对象模型以对象的方式来表示对应的html,它有一系列的规范 i.e. 在浏览器中,DOM是通过JS实现的. DOM: DOM Core:核心结构.API的定义 DOM HTML: 定义HTML如何转化成对象(HTML对应的对象)-- 操作节点 DOM Style:样式转换成对象 -- 操作样式 DOM Event:事件对象的模型 -- 响应用户的操

DOM事件流的三个阶段

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流. DOM事件流分为三个阶段,分别为: 捕获阶段:事件从Document节点自上而下向目标节点传播的阶段: 目标阶段:真正的目标节点正在处理事件的阶段: 冒泡阶段:事件从目标节点自上而下向Document节点传播的阶段. 捕获阶段: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

DOM事件处理函数

事件 JavaScript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或是处理程序)来预定事件,以便事件发生时执行相应的代码 IE9.Firefox.Opear.Safari和Chrome全部都已经实现“DOM2级事件”模块的核心部分. 一.事件流事件流描述的是从页面接收事件的顺序. 事件发生时元素节点之间按照特定的顺序传播,这个过程即DOM事件流. 事件流:点击了某个按钮也触发了这个按钮所在的区域,同时也触发了区域所在的页面.

JavaScript DOM–事件操作

事件注册事件给元素添加事件,为注册事件或者绑定事件注册事件两种方式传统方式监听事件方式事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.addEventListener(type, listener, [useCapture]) 参数type: 事件类型字符串,不要on 如click,mouseover 参数listener: 事件处理函数,触发的时候要做的事情参数useCapture: 可选,是一个

JS事件高级

1. 注册事件(绑定事件) 1.1注册事件概述 1.2 addEventListener 事件监听方式 1.3 attachEvent 事件监听方式 1.4 注册事件兼容性解决方案 2. 删除事件(解绑事件) 2.1 删除事件的方式 2.2 删除事件兼容性解决方案 3. DOM 事件流 4. 事件对象 4.1 什么是事件对象 4.2 事件对象的使用语法 4.3 事件对象的兼容性方案 4.4 事件对象的常见属性和方法 5. 阻止事件冒泡 5.1 阻止事件冒泡的两种方式 5.2 阻止事件冒泡的兼容性

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）

1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> var b=document.getElementById("b1"); b.onclick=function(){ alert("hello"); } b.onclick=function(){ alert("你好"); } </script&g

JS DOM重点核心笔记

DOM重点核心文档对象模型,是W3C推荐的处理可扩展的标记语言的标准编程接口我们主要针对与勇士的操作,主要有创建.增加.删除.修改.查询.属性操作.事件操作三种动态创建元素的区别 document.write() //在文档中写一个标签,如果页面文档加载完毕,再调用这句话会导致页面重绘 <button>123</button> <script> var btn = document.querySelector("button"

js事件常用操作、事件流

注册事件给元素添加事件,称为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听注册方式传统方式 on开头的事件,例如onclick <button onclick="alert('hi~')"></button> 或 btn.onclick = function() {} 具有唯一性:同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式 eventTarget.addEventListener(

第二十二课：js事件原理以及addEvent.js的详解

再看这篇博客之前,希望你已经对js高级程序编程一书中的事件模块进行了详读,不然我只能呵呵了. document.createEventObject,在IE下创建事件对象event. elem.fireEvent,在IE下触发事件,里面有两个参数type,event.其中type是触发的事件类型,event是事件本身.举个例子: document.attachEvent('ondataavailable', function (event) { //document上绑定自定义事件dataav

为什么说 onclick 只能得到 冒泡阶段

热门专题

为什么说 onclick 只能得到冒泡阶段