【DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理】的更多相关文章

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象

相关 知识 >>> 相关 练习 >>> 实现要求: 在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象,模拟实现用户的增删改操作,并将结果输出到控制台.要求如下: set注入方式实现对象的依赖关系. 增删改操作需要实现.提交和关闭操作. 事务的开启 实现思路: 在com.mhys.pojo包下,创建User类. 在com.mhys.dao包下,创建U…

JavaScript 阻止默认时间和冒泡时间

<!DOCTYPE HTML><html> <head> <title>event cancel</title> </head> <body> <a href="https://www.baidu.com/">baidu</a> <div style="width: 400px; height: 300px; background: red;" id=&…

addevent兼容函数 && 阻止默认行为 && 阻止传播

function addEvent(a, b, c, d) { a.addEventListener ? a.addEventListener(b, c, d) : a.attachEvent("on" + b, c) } function removeEvent(a, b, c, d) { a.removeEventListener ? a.removeEventListener(b, c, d) : a.detachEvent("on" + b, c) } 第四…

1 实现添加功能 1.1 定义一个学员类（Student），在Student类中定义姓名、性别和年龄属性，定义有 参数的构造方法来初始化所以的成员属性 1.2 创建学员类对象来存放学员信息，并且为每一个学生对象添加的相应的编号。并将 学员类对象添加到Map<Integer,Student>集合中 1.3 添加完成后，显示所有已添加的学员姓名 1.4 限制年龄文本框只能输入正整数,否则的会采

学生类 package com.lanxi.demo1_3; public class Student { private String name; private String sex; private int age; @Override//重写toString方法 public String toString() { return "Student [name=" + name + ", sex=" + sex + ", age=" + a…

javascript获取事件源对象和产生事件的对象

事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">…

Web：移动端阻止默认行为的小坑

问题 移动端 web 开发中,使用 addEventListener 阻止了 touchstart 事件的默认行为却发现没有生效 描述 再移动端 web 开发中,我们一般会用 addEventListener 给 document 节点的 touchstart 事件设置 preventDefault() 方法以达到禁用事件默认行为的目的,但有时候会发现在 chrome 移动端模拟器或者手机浏览器上事件的默认行为并没有成功禁用. document.addEventListener("touchst…

js事件委托篇(附js一般写法和js、jq事件委托写法)

参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工,前台MM照样可以签收新员工的快递,新员工即便刚来但一样拥有拿自己快件的方法: 通俗来讲: 事件有:oncl…

获取JSON对象的属性值

1.问题背景 有一个json对象,其中有键值对,那怎样获取json对象中属性值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">…

反射：获取Class对象的三种方式

获取Class对象的三种方式 package lianxiApril18; /** * 获取Class对象的三种方式 * 1 Object ——> getClass(); * 2 任何数据类型(包括基本数据类型)都有一个“静态”的class属性 * 3 通过Class类的静态方法:forName(String className)(常用) * */ public class Fanshe { public static void main(String[] args) { //第一种方式获取Cl…

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window.event 7 return e || window.event; 8 } 获取事件所对应的目标——兼容处理 /* * 功能: 获取事件所对应的目标 * 参数: 表示常规浏览器的事件对象e */ function getTargetByEvent(e) { // 如果存在e.target,直接返回,…

JavaScript 之默认行为 DOM2级，事件委托机制

1. 事件默认行为及阻止方式    1.1 浏览器的默认行为       JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等.    1.2 阻止默认行为的方式 event.preventDefault();  event.returnValue = false;  return false; //IE低版本和其他版本都支持return false,而其他两种IE低版本不支持. <a href="">click he…

2015-03-12——简析DOM2级事件

DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于window对象,页面需要的所有图像文件都载入完成才触发.unload  适用于window对象,页面被关闭之前捕获最后一瞬间的信息.error  适用于window对象和图像对象.图像一旦设置src属性,就开始载入图像.abort  在图像完全载入之前,因浏览器停止载入页面导致图像载入失败时触发.通常发生在…

关于DOM事件流、DOM0级事件与DOM2级事件

一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比如说 React 中的单向数据流,Node 中的流,还有 DOM 事件流,都是流的一种生动体现.至于流的具体概念,用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 三.事件流 浏览器在为当前页面与用户做交互的过程中,比如点击鼠标左键,会出现这个左键是怎么传到页面上,还有怎么响应…

JS 阻止浏览器默认行为和冒泡事件

JS 冒泡事件   首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的…

DOM0、DOM2级事件

JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1')">第一项</span> 在js中绑定例如://<span onclick="alert('2')">第一项</span> var Ospan=document.getElementsByTagName('span')[0];Ospan…

JS事件委托（事件代理，dom2级事件）

一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素)来处理.也就是:利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作.使用事件委托技术能让你避免对特定的每个节点添加事件监听器. 三.事件委托作用 1.减少事件注册,节省内存 -table可以代理所有td的click事件 -ul可以代理所有li的click事件 2.能为之后新增…

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等 事件流指的是 从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始 一级级向上冒泡,到document为止——从里到外 IE 5:div--body--document; I…

阻止默认事件event.preventDefault();

阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入.  IE中,event是window对象的属性. event.preventDefault();方法用于取消默认事件,但是不兼容IE,在IE下,要用event.returnValue=false;来处理. document.oncontextmenu=function (ev) { var oEvent=ev||event; if (oEvent.pr…

s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单.注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作.无论哪种情况,调用该方法都没有作用. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作…

锋利的jQuery-4--阻止事件冒泡和阻止默认行为

阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", function(event){ //代码 event.stopPropagation(); //通过bind创建的事件对象event来执行 } ); 阻止默认行为: 网页中的默认行为,例如链接跳转和form提交,可以通过preventDefault()方法来阻止. $("#submit").bind…

javascript 阻止事件冒泡和阻止默认事件对比

公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并阻止事件冒泡到window)当点击上input的时候就显示ul再给window或者document 绑定一个click事件当点击页面其他地方的时候隐藏ul. 这里还要给ul 添加一个代理点击事件(事件代理比遍历li绑定点击事件性能要高)当点击到下面的li的时候把li里面的内容添加到input里面 并…

测试DOM0级事件和DOM2级事件的堆叠

1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { //符合W3C的事件模型 if (obj.addEventListener) { obj.addEventListener(evtype,fn,false); return obj; } //IE或Opera浏览器 if (!obj.functions) obj.functions={}; if…

滚轮事件的防冒泡、阻止默认行为的代码(效果是：只让当前div滚动，连当前文档都不滚动的效果)

//用firefox变量表示火狐代理var firefox = navigator.userAgent.indexOf('Firefox') != -1;function MouseWheel(e){//阻止事件冒泡和默认行为的完整兼容性代码    e = e||window.event;    if (e.stopPropagation) {//这是取消冒泡        e.stopPropagation();    } else{        e.cancelBubble = true;…

DOM1级问题与DOM2级事件

前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BOM的文章:<细说javascript BOM> 一.DOM0级事件 0级DOM分为两种 行内事件:在标签中写事件 元素.on事件名=函数 1.行内<input type="button" id="btn" value="按钮" on…

【20190226】JavaScript-知识点记录：dom0级事件，dom2级事件

DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行(也就是this引用当前元素): var btn = document.getElementById('myBtn'); btn.onclick = function(){ alert(this.id); }; DOM2级事件处理程序: 通过addEventListener()方法和removeEv…

js阻止默认事件，如a标签跳转和事件冒泡

禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> 原理是当点击a标签时首先触发onclick函数,然后才执行href的跳转.但是在执行到return false的时候直接终止了执行,也就没有了链接的跳转. 目前疑问是 return false 和 return true 以及 return 的作用都是结束当前函数的执行并分别返回 false,true,und…

关于DOM2级事件的事件捕获和事件冒泡

DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件②.处于目标阶段,检测机制到达目标元素,按事件注册顺序执行绑定在目标元素上的事件.③.事件冒泡阶段,从目标元素出发,向外层元素冒泡,最后到达顶层…

javascript -- 阻止默认事件 阻止事件冒泡

1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: <a href="http://www.baidu.com" target="_black">百度</a> var samp = document.getElementByTagName("a"); samp.addEvent…

DOM2级事件处理程序

DOM2级时间定义了两个方法:addEventListener() 和removeEventListener() 他们都接受3个参数:1)要处理的事件名   2)作为事件处理程序的函数 3)一个布尔值   (ps:true表示捕获阶段调用事件处理程序,false表示冒泡阶段调用事件处理程序) 使用DOM2比DOM0的好处有:可以添加多个事件处理程序…

处理事件冒泡，阻止默认事件工具类，兼容IE

//处理事件冒泡,阻止默认事件工具类,兼容IEvar eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ //处理IE浏览器的兼容 element.attachEvent('on'+type,handler);…