transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

transitionend过渡监听事件:

过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例:

	<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {width: 200px;height: 200px;background: rgb(185, 9, 9);}div:hover {transform: translateX(500px);transition: all 10s;}</style></head><body><div></div></body><script>var divs = document.querySelector('div');divs.addEventListener('transitionend', function(e) {console.log(e);});</script></html>

change事件监听类型为checked的input变化:
当input的checked属性值发生改变时触发事件函数。

classList属性操作类名:

classList属性是用来操作一个元素的类名的,element.classList返回的是一个类名的伪数组,其属性还有几个常用方法:
element.classList.add(‘类名’)添加一个类名;
element.classList.remove(‘类名’)移除某个类名;
element.classList.toggle(‘类名’)有则删,无则加;

框架/对象事件:

指Frame/Object事件,
在这里插入图片描述
元素的创建:

1.document.write(‘标签代码及内容’),如果在页面加载完在创建的,页面之前的内容会被覆盖掉;
2.element.innerHTML=‘标签代码及内容’,这里还可以是innerText或textContent;3.document.createElement(‘标签名’)等方式创建,如下文创建节点;得到一个对象;
4.利用element.insertAdjacentHTML()把字符串格式元素添加到父级元素中,括号中可以传入两个参数,第一个参数表示位置,第二个参数表示要插入的元素,第一个参数有:beforebegin元素自身前面、afterbegin元素内部第一个子节点前、beforeend元素内部最后一个子节点之后、afterend元素自身的后面

操作元素内容:
改变元素的内容:element.innerText 和element.innerHTML及element.textContent可以改变元素的内容,innerText仅仅改变的是元素的文本内容,IE8支持,而innerHTML还可以改变标签:

	<body><div id="box">鼠标移入</div><script>var box = document.getElementById('box');box.onmouseenter = function() {box.innerText = '鼠标移除';alert(box.textContent);};box.onmouseleave = function() {box.innerHTML = '<h1>innerHTML</h1>';};</script></body>

兼容代码:

很多API在不同的浏览器存在兼容性问题,为了兼容更多的浏览器,通常会把可以实现相同功能的不同API通过条件语句都运用上,如果某浏览器不兼容某个API,那么就会返回undefined,因此可以通过判断是否是undefined来实现兼容代码:

	<body><div id="testdiv"></div><script>function getEleById(iD) {return document.getElementById(iD);};// 设置文本的兼容代码:function setText(elements, texts) {if (elements.innerText) {elements.innerText = texts;} else if (elements.innerHTML) {elements.innerHTML = tests;} else {elements.textContent = texts;};};setText(getEleById('testdiv'), 'hello');</script></body>

操作元素的样式属性:

操作元素的属性有两种方式:修改行内样式:element.style.属性 = ‘属性值’;修改类名改变样式:element.calssName = ‘类名’

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#box {width: 200px;height: 200px;background: pink;}.red {color: red;font-size: 30px;}</style></head><body><div id="box">hello</div><script>var box = document.getElementById('box');console.dir(box);box.onmouseenter = function() {this.style.backgroundColor = 'skyblue';};box.onmouseleave = function() {this.className = 'red';};</script></body></html

-Attribute自定义属性操作:

实际开发中会给标签添加很多自定义的属性,特别是html5和css3中,但是自定义属性的值是不能通过this.属性名拿到的,同样也是无法设置的,这里有特殊的方法:.getAttribute(‘属性名’)拿到属性值,.setAttribute(’属性名‘,属性值)设置属性,.removeAttribute(‘属性名’)移除属性,这两种方法都是在DOM上操作的;

	<body><div score='10'>明明</div><div score='20'>小花</div><div score='30'>阿杰</div><script>var divScore = document.getElementsByTagName('div');for (var i = 0; i < divScore.length; i++) {divScore[i].setAttribute('sx', i);divScore[i].onclick = function() {// alert(this.score); //undefinedthis.removeAttribute('sx'); //移除sx属性console.log(this.getAttribute('score')); //对应div的score值};};</script></body>

return false阻止跳转:

超链接href属性中有地址的话会跳转,有的时候仅仅是点击不需要跳转,此时可以使用return false来阻止跳转:

		<script>var aId = document.getElementById('aid');aId.onclick = function() {alert('renter false阻止超链接跳转');return false;};</script>

元素绑定相同事件:
给元素绑定事件的方式有三种:
1.element.on事件名=function(){}微软特有;
2.element.addEventListener(‘事件名’,function(){},布尔值目前写false);
3.element.attachEvent(‘on事件名’,function(){});

addEventListener和attachEvent可以给同一个元素绑定相同事件不同处理函数的多个事件,而element.on事件名=function(){}的方式只能绑定相同事件中一个:

	<script>element.addEventListener('click', function() {console.log('这是addEventListener事件的处理函数1');}, false);element.addEventListener('click', function() {console.log('这是addEventListener事件的处理函数2');}, false);element.attachEvent('onclick', function() {console.log('这是attachEvent事件的处理函数1');});element.attachEvent('onclick', function() {console.log('这是attachEvent事件的处理函数2');});</script>

它们在不同的浏览器存在兼容性,其兼容代码如下:

	<script>// element为事件源,type为事件名,fn为事件处理函数function elementAddevent(element, type, fn) {if (element.addEventListener) {element.addEventListener(type, fn, false);} else if (element.attachEvent) {element.attachEvent('on' + type, fn);} else {element['on' + type] = fn;};};</script>

元素解绑事件:

1.element.事件类型=null;可以把之前事件的指向重新设为null,null代表没有事件处理函数,则事件不处理。

2.element.removeEventListener(‘事件类型’,命名函数名,布尔值一般用false);需要注意的是:第二个参数传入的是一个命名函数的名字,否则解绑事件不成功。

3.element.detachEvent(‘on事件类型’,命名函数名);同样第二个参数任然使用命名函数的名字。

上面方法中依然各自有兼容问题,为了兼容更多浏览器,其兼容代码如下:

	<script>function removeEvent(element, type, fname) {if (element.removeEventListener) {element.removeEventListener(type, fname, false);} else if (element.detachEvent) {element.detachEvent('on' + type, fname);} else {element['on' + type] = null;};};</script>

事件冒泡:

事件冒泡指多个元素嵌套有层次关系,且元素都注册了相同事件,如果最里面的元素的事件被触发,那么外面元素的事件也会自动触发,但是里面的元素的事件不会被触发。

阻止事件冒泡:window.event.cancelBubble = ‘true’;给事件添加此代码后,事件冒泡到有此代码的元素(包括此代码的元素),但是它也有兼容问题,另一种方法是在事件处理函数中传入一个参数,这个参数调用.stopPropagation()方法,window.event可以用这里的参数代替:

	<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {border: 1px solid transparent;}#box1 {width: 200px;height: 200px;background-color: rgb(201, 27, 27);}#box2 {width: 100px;height: 100px;background-color: rgb(118, 197, 29);} #box3 {width: 50px;height: 50px;background-color: rgb(98, 29, 161);}</style></head><body><div id='box1'><div id='box2'><div id='box3'></div></div></div></body><script>function getEs(idname) {return document.getElementById(idname);};getEs('box1').onclick = function() {console.log(this.id)};getEs('box2').onclick = function(e) {console.log(this.id);window.event.cancelBubble = 'true';e.stopPropagation();};getEs('box3').onclick = function() {console.log(this.id)};</script></html>

事件三阶段(事件流):

1.事件捕获阶段:从外面的元素到里面的元素,e.eventPhase的值为1表示的是捕获阶段;

2.事件目标阶段:事件被触发的事件元素,e.eventPhase的值为2表示目标阶段;

3.事件冒泡阶段:从里面的元素到外面的元素,e.eventPhase的值为3表示冒泡阶段;

添加事件的方法中第三个参数布尔值就是控制事件的阶段的,false则为冒泡事件,true则表示的是捕获事件:

	<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {border: 1px solid transparent;} #box1 {width: 200px;height: 200px;background-color: rgb(201, 27, 27);} #box2 {width: 100px;height: 100px;background-color: rgb(118, 197, 29);}      #box3 {width: 50px;height: 50px;background-color: rgb(98, 29, 161);}</style></head><body><div id='box1'><div id='box2'><div id='box3'></div></div></div></body><script>function getEs(idname) {return document.getElementById(idname);};getEs('box1').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);getEs('box2').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);getEs('box3').addEventListener('click', function(e) {console.log(this.id + '-----' + e.eventPhase);}, true);</script></html>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unix/Linux环境C编程入门教程(18) kali-linuxCCPP开发环境搭建

1. Kali linux是BT5的晋级版本&#xff0c;用于信息安全。基于Debian7内核。新建虚拟机。2. 选择默认虚拟机3. 选择稍后安装操作系统4.选择Linux Debian7 64位&#xff0c;因为KaliLinux基于Linux Debian7。5. 设置虚拟机名称为KaliLinux6.设置处理器为双核。7. 设置内存为2G8.…

javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步

BOM介绍&#xff1a; BOM指的是浏览器对象模型&#xff0c;是用来操作浏览器的&#xff0c;例如浏览器弹窗、地址栏、滚动条等&#xff0c;浏览器顶级对象&#xff1a;window&#xff1b;页面中的所有内容都是属于window的&#xff0c;window可以省略&#xff1b;confirm(‘带…

javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

实例对象和构造函数的关系及原型&#xff1a; 实例对象是通过构造函数创建出来的&#xff0c;实例对象的构造器constructor就是指向构造函数的&#xff1b;每个实例对象中的同一方法的指向是各不相同的&#xff0c;但是其属性值相同的属性可以相同&#xff0c;这样会造成内存浪…

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动端web现状&#xff1a; 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;Opera浏览器&#xff0c;百度手机浏览器&#xff0c;360安全浏览器&#xff0c;谷歌浏览器&#xff0c;搜狗手机浏览器&#xff0c;猎豹浏览器及杂牌浏览器。移动端常见的浏览…

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…

分享MYSQL中的各种高可用技术(源自姜承尧大牛)

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…

数据库、MySQL介绍及安装流程、SQL语句中增删改查、SQL注入、通过php操作数据库,plugin ‘caching_sha2_password加密规则,分表查询

MySQL数据库&#xff1a; 数据库&#xff1a; 存放数据的仓库&#xff0c;用来按照特定的结构去组织和管理我们的数据&#xff0c;有数据库就可以更加方便的储存数据&#xff1b; 数据库只是存储数据的一种手段&#xff0c;最终数据是存放在硬盘中的&#xff0c;只是存放的格…

chartjs和echartsjs库简介

chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图&#xff0c;在实际开发中我们依旧不会使用canvas和SVG&#xff0c;因为考虑到开发成本&#xff0c;一般会采用相关的图表库进行辅助开发&#xff0c;市面上常用的图表库有chart.js和echarts.js&#xff1b;如果…

弱智的我

【你能看到多少个人头? 】 0—4张: 弱智; 5—8张: 一般人; 9—11张: 特别感性; 11—13张: 精神分裂. 晕倒, 我是弱智的...就看到一个人头...转载于:https://www.cnblogs.com/zhangzujin/p/3877222.html

typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

网站模板搭建网站&#xff1a; 使用网站模板搭建网站很简单&#xff0c;只需要将相关文件放到你自己的服务器上面&#xff0c;之后在进行相关的配置即可。这里给大家介绍两款网站模板&#xff1a; typecho&#xff1a; 是一个轻量高效&#xff0c;简单操作就能搭建网站的模板…

在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件&#xff1a; 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端&#xff0c;其具体方法如下&#xff1a; 1.先将要调试的页面在浏览器&#xff08;Google&#xff09;打开&#xff0c;这里小编打开桌面test文件夹中的…

Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介&#xff1a; Bootstrap是Twitter&#xff08;推特&#xff09;开发的&#xff0c;目前最受欢迎的前端开源框架&#xff0c;基于jQuery用于开发HTML、CSS、JavaScript&#xff0c;简洁灵活&#xff0c;常用于开发响应式布局及移动端开发。其中文官方文档&#xf…

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…

node简介及安装、下载及运行hexo

node简介&#xff1a; 1.node.js的可以打开服务端的黑盒子及高级前端(Vue、React 、Angular)的学习&#xff0c;例如&#xff1a;文件的读写、网络服务的构建、网络通信等。 2.node.js是操作服务器的一种工具&#xff0c;构建于Chrome的v8引擎之上&#xff0c;可以操作服务器…

Repository 仓储,你的归宿究竟在哪?(一)-仓储的概念

写在前面 写这篇博文的灵感来自《如何开始DDD(完)》&#xff0c;很感谢young.han兄这几天的坚持&#xff0c;陆陆续续写了几篇有关于领域驱动设计的博文&#xff0c;让园中再次刮了一阵“DDD探讨风”&#xff0c;我现在不像前段时间那样“疯狂”了&#xff0c;写博文需要灵感&a…

浏览器基础知识

Web浏览器的主要功能是展示网页资源&#xff0c;即请求服务器并将结果展示在窗口中。工作原理大概如下&#xff1a; 地址栏输入URL 浏览器根据输入的URL查找域名的IP地址&#xff0c;DNS查找过程如下&#xff1a; 浏览器缓存——浏览器会缓存DNS记录一段时间&#xff0c;不同浏…