JS DOM属性+JS事件
DOM属性
console.log(ele.attributes) 获取ele元素的属性集合
ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值
ele.attributes[attr].nodeValue 获取指定属性值
ele.attributes.removeNamedItem(attr) 删除指定属性
创建属性并赋值：
var attr=document.createAttribute(attr); 创建属性对象
attr.value=value; 给属性赋值
ele.attributes. setNamedItem (attr) 设置属性值
getAttribute()能获取元素的固有属性，也能获取元素的自定义属性
只能获取单个元素节点的属性值，且不属于document对象，属于单个元素节点对象
ele.getAttribute(attr)
ele.setAttribute(attr,value) 设置属性
ele.removeAttribute(attr) 移除属性
布尔值属性-案例：
inputs[i].checked = 1/true/’checked’; 选中
inputs[i].checked = 0/false/null; 没被选中
inputs[i].removeAttribute('checked');
options[i].selected=true;
input[i].readonly=true;
select.multiple=true;
div.hidden=true;
字符串属性：
获取data属性
elem.dataset.toggle 获取data-toggle属性
elem.dataset.xxxYyy 获取data-xxx-yyy属性
获取class属性
elem.className 获取所有class属性
自定义class操作方法：
首先贴出domReady.js，后面常常会用到，这里只贴出一次！！！
function myReady(fn){
//对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
if ( document.addEventListener ) {
document.addEventListener("DOMContentLoaded", fn, false);
} else {
IEContentLoaded(fn);
}
//IE模拟DOMContentLoaded
function IEContentLoaded (fn) {
var d = window.document;
var done = false;
//只执行一次用户的回调函数init()
var init = function () {
if (!done) {
done = true;
fn();
}
};
(function () {
try {
// DOM树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
} catch (e) {
//延迟再试一次~
setTimeout(arguments.callee, 50);
return;
}
// 没有错误就表示DOM树创建完毕，然后立马执行用户回调
init();
})();
//监听document的加载状态
d.onreadystatechange = function() {
// 如果用户是在domReady之后绑定的函数，就立马执行
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
}
}
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>class attributes</title>
<script src="domReady.js"></script>
<script>
var CC = {
// 获取class，返回数组
getClass: function(ele) {
// 将多个空格正则匹配成一个空格
// 然后将字符串按照空格来分割成数组
return ele.className.replace(/\s+/, " ").split(" ");
}, // 判断是否含有某个class
hasClass: function(ele, cls) {
// 查询某个类名是否出现在所有类名集合中
return -1 < (" " + ele.className + " ").indexOf(" " + cls + " ");
}, // 给元素添加某个类
addClass: function(ele, cls) {
// 判断类名是否已经存在
if (!this.hasClass(ele, cls))
ele.className += " " + cls;
}, // 移除某个类
removeClass: function(ele, cls) {
if (this.hasClass(ele, cls)) {
// 正则：开头可以有空格或者没有空格
// 结尾可以有空格或者没有空格
// gi表示查找整个字符串，并且忽略大小写
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', "gi");
// 将匹配到的类名用一个空格来代替
ele.className = ele.className.replace(reg, " ");
}
}, // 某个类：不存在就添加；存在就移除
toggleClass: function(ele, cls) {
if (this.hasClass(ele, cls)) {
this.removeClass(ele, cls);
} else {
this.addClass(ele, cls);
}
}
}; myReady(function() {
var body = document.body;
console.log(CC.getClass(body));
console.log(CC.hasClass(body, 'bbb'));
CC.addClass(body, 'ccc');
CC.removeClass(body, 'aaa');
CC.toggleClass(body, 'bbb');
});
</script>
</head>
<body class="aaa bbb aaa">
TEST
</body>
</html>
elem.classList.add(cls) 添加class
elem.classList.remove(cls) 移除class
elem.classList.contains(cls) 是否存在某个class
elem.classList.toggle(cls) 切换某个class
elem.classList.toString() 字符串形式输出所有class
JS事件
事件监听函数三种方式：
1、直接在html中定义，不建议使用
<button onclick=”function(){alert(‘clicked’);}”>按钮</button>
<body onload=”init()”></body>
2、DOM 0级事件：元素只能绑定一个监听函数
先获取DOM元素，再绑定事件
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("DOM0级事件绑定方式 ");
}
3、DOM 2级事件：可以绑定多个监听函数，还有捕获和冒泡控制
var btn = document.getElementById("btn");
btn.addEventListener('click', function() {
alert("DOM2级事件绑定方式")
}, false);
移除事件：
btn.removeEventListener('click', Dom);
IE事件流：
IE8及以下不支持DOM 2级
没有事件捕获，默认就是冒泡
var btn = document.getElementById("myBtn");
var clickme = function() {alert("Clicked");}
btn.attachEvent("onclick", clickme); /*绑定事件*/
btn.detachEvent("onclick", clickme); /*移除事件*/
//补充：IE中this指向window
btn.attachEvent("onclick",function(){alert(this === window); })
跨浏览器事件处理程序：兼容IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨浏览器事件处理程序</title>
</head>
<body>
<button id="myBtn">点击我</button>
<script type="text/javascript">
var EventUtil = {
//绑定事件
addHandler:function(element,type,handler){
if(element.addEventListener){
//Chrome Firefox IE9等 addEventListener
element.addEventListener(type,handler,false);
}else if (element.attachEvent) {
//IE8及IE8以下的浏览器 attachEvent
element.attachEvent("on"+ type,handler);
} else{
// 这种情况几乎不存在
element["on"+type] = handler
}
},
//移除事件
removeHandler: function(element,type,handler){
if(element.removeEventListener){
//Chrome Firefox IE9等
element.removeEventListener(type,handler,false);
}else if (element.detachEvent) {
//IE8及IE8以下的浏览器
element.detachEvent("on"+type,handler);
} else{
// 这种情况几乎不存在
element["on"+type] = handler
}
}
}
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
}
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
</script>
</body>
</html>
事件委托与事件冒泡
事件周期：
1、 事件捕获：沿着DOM树（直系亲属）向下
2、 事件执行
3、 事件冒泡：沿着DOM树（直系亲属）向上
addEventListener()最后一个参数：false事件冒泡 true事件捕获
事件委托：原理就是事件冒泡
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>事件冒泡和事件捕获</title>
</head> <body> <div id="parent">
<div id="child" class="child">点击儿子</div>
</div>
<ul id="ul">
<li id="one">item1</li>
<li id="two">item2</li>
<li id="thr">item3</li>
<li id="four">item4</li>
<li id="fiv">item5</li>
<li id="six">item6</li>
</ul>
<script type="text/javascript">
//事件委托，利用了冒泡机制
var ul = document.getElementById("ul");
ul.addEventListener("click", function(event) { if(event.target.id == "one") {
alert(1)
} else if(event.target.id == "two") {
alert(2)
} else if(event.target.id == "thr") {
alert(3)
} else if(event.target.id == "four") {
alert(4)
} else if(event.target.id == "fiv") {
alert(5)
} else {
alert(6)
}
}, false);
</script>
</body> </html>
Event对象属性与方法
event.type 事件类型：比如click
event.target 事件目标对象（如果事件绑定在父元素上，点击了子元素，那么目标对象是子元素）
event.currentTarget 事件绑定的对象（如果事件绑定在父元素上，点击了子元素，那么绑定对象是父元素）
event.preventDefault 阻止默认行为
<a href="http://baidu.com" id="a">跳转链接</a>
var a = document.getElementById("a");
a.addEventListener("click",function(event){
event.preventDefault();
alert(11)
});
event.stopPropagation 阻止事件冒泡或者捕获
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.addEventListener("click",function(){
alert("parent")
})
child.addEventListener("click",function(event ){
alert("child");
//阻止冒泡
event.stopPropagation();
})
event.clientY 浏览器顶部底边到鼠标的位置，不计算滚动轴的距离
event.pageY 浏览器顶部底边到鼠标位置，但是它计算滚动轴的距离
event.screenY 屏幕顶部到鼠标位置（比如把浏览器缩小，但仍然计算的是计算机屏幕）
IE中的Event对象及方法
event.type 事件类型
event.returnValue = false; 阻止默认事件
event.cancelBubble = true; 阻止事件冒泡
event.srcElement 触发对象（点击谁就是谁）
Event对象跨浏览器兼容写法：兼容IE
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Event对象跨浏览器兼容写法</title>
</head> <body>
<div id="parent">
<div id="child">点击我</div>
</div>
<a href="http://www.baidu.com" id="a">跳转链接</a>
<script type="text/javascript">
//Event addEventListener chrome firefox IE9 event.target preventDefault stopPropagation
//Event attachEvent IE8系列的 event.srcElement returnValue cancelBubble
var EventUtil = {
//绑定事件
addHandler: function(element, type, handler) {
if(element.addEventListener) {
//Chrome Firefox IE9等 addEventListener
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
//IE8及IE8以下的浏览器 attachEvent
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
//移除事件
removeHandler: function(element, type, handler) {
if(element.removeEventListener) {
//Chrome Firefox IE9等
element.removeEventListener(type, handler, false);
} else if(element.detachEvent) {
//IE8及IE8以下的浏览器
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
// 获取被点击的元素
getTarget: function(event) {
return event.target || event.srcElement;
},
// 阻止默认事件
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止冒泡或者捕获
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true;
}
}
} var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "click", function(event) {
alert("parent被触发了")
}) var child = document.getElementById("child");
EventUtil.addHandler(child, "click", function(event) {
alert("child被触发了")
var target = EventUtil.getTarget(event);
console.log(target);
//阻止事件冒泡
EventUtil.stopPropagation(event)
})
var a = document.getElementById("a");
EventUtil.addHandler(a, "click", function(event) {
EventUtil.preventDefault(event);
})
</script>
</body> </html>
JS事件类型：
【UI事件类型】
1、load事件
当页面完全加载后在window上面触发
EventUtil.addHandler(window, "load", function(e) {
alert("Loaded!");
});
图片预加载(将图片缓存到内存中
var image = new Image();
EventUtil.addHandler(image, "load", function(event){
alert("Image loaded!");
});
image.src = "smile.png";
js动态加载完毕
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("js Loaded");
});
script.src = "jquery.js";
document.body.appendChild(script);
css动态加载完毕
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css Loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
2、unload事件 用户从一个页面切换到另一个页面
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
3、resize事件
EventUtil.addHandler(window, "resize", function(event){
alert("Resized");
});
4、 scroll事件. 主要针对新旧浏览器
EventUtil.addHandler(window, "scroll", function(event){
alert(111)
});
【焦点事件类型】
1、 blur 失去焦点
2、 focus 不支持冒泡，获取焦点
3、 focusin 同focus一样，支持冒泡
4、 focuout 同blur一样
【鼠标事件】
1、 click 点击
2、 dblclick 双击
3、 mousedown 鼠标按下
4、 mouseup 鼠标松开
mousedown+mouseup=click
5、 mousemove 鼠标移动
6、 mouseout 离开目标元素或子元素
7、 mouseover 进入目标元素或子元素
8、 mouseenter 进入目标元素
9、 mouseleave 离开目标元素
鼠标单击+键盘按键
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event) {
var keys = new Array();
if(event.shiftKey) {
keys.push("shift");
}
if(event.ctrlKey) {
keys.push("ctrl");
}
if(event.altKey) {
keys.push("alt");
}
if(event.metaKey) {
keys.push("meta");
}
console.log("keys:" + keys.join(","));
});
mousedown鼠标点击细分：
event.button == 0 鼠标左键
event.button == 1 鼠标中键
event.button == 2 鼠标右键
IE8派系
event.button == 0 没有按下按钮
event.button == 1 按下主鼠标按钮
event.button == 2 按下次鼠标按钮
event.button == 3 按下同时按下主、次鼠标按钮
event.button == 4 按下中间鼠标按钮
EventUtil.addHandler(myBtn, "mousedown", function(event) {
console.log("mousedown");
console.log(event.button)
})
【键盘事件】
event.keyCode 键码
event.charCode ASCII码（适用于keypress）
1、 keydown 任意键触发
2、 keyup 释放某键
3、 keypress 字符键触发
4、 textInput 键盘输入（event.data获取）
【DOM改变相关】
1、 DOMNodeRemoved document中任意元素被删除
2、 DOMNodeInserted document中任意元素被添加
3、 DOMSubtreeModified document结构中发生任何变化
4、 DOMNodeRemovedFromDocument 从文档中移除之前
5、 DOMNodeInsertedIntoDocument 从文档中添加之前
重点：
1、 DOMContentLoaded
与load区别：在DOM树结构完成之后就会触发，不理会图像。javascript文件、css文件或其他资源是否已经下载，所以比load快
2、 readstatechange （不太好用）
支持IE、firfox、opera，提供文档或者元素加载过程，但是很难预料与load事件一起使用时候
（1）document.readState == uninitialized 尚未初始化
（2）loading 对象正在加载数据
（3）interactive 可以操作对象，但还没有完全加载
（4）对象已经加载完毕
3、hashchange #后面的值变化，只能给window添加
EventUtil.addHandler(window, "hashchange", function(event) {
console.log(event.oldURL + ":"+event.newURL);
})
【移动端常用】
1、 touchstart
EventUtil.addHandler(mybtn, "touchstart", function(event) {
console.log("当前触摸屏幕的触摸点数组："+event.touches)
console.log("数组中只包含引起事件的触摸点信息："+event.changedTouches)
console.log("只包含放在元素上的触摸信息："+event.targetTouches)
});
2、 touchmove 手指在屏幕上滑动
3、 touchend 手指在屏幕上移开
4、 touchcancel 当系统停止跟踪触摸的时候触发
JS DOM属性+JS事件的更多相关文章
- js dom添加回车事件
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta ...
- DOM属性和事件
1-22 DOM属性设置与获取 1.获取属性: getAttribute("attribute"): var p = document.getElementById(" ...
- JS DOM属性，包括固有属性和自定义属性，以及属性获取、移除和设置
属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取,自定义属性不行 <!DOCTYPE html> <ht ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
随机推荐
- HYSBZ_1854_并查集
http://www.lydsy.com/JudgeOnline/problem.php?id=1854 每次判断每组两个数的根,若不等,则小的遍历1,大的为根,若相等,则说明前面的小的都遍历过,根遍 ...
- Android Studio 学习笔记(二)：布局简介和xmlns说明
初学Android Studio,是在b站看的教程视频,这里的笔记也是以其为基础的,个人强烈安利: [天哥]Android开发视频教程最新版 Android Studio开发 Android 布局简介 ...
- 蓝桥杯2015年省赛C/C++大学B组
1. 奖券数目 有些人很迷信数字,比如带“4”的数字,认为和“死”谐音,就觉得不吉利.虽然这些说法纯属无稽之谈,但有时还要迎合大众的需求.某抽奖活动的奖券号码是5位数(10000-99999),要求其 ...
- 大话IDL编程之函数功能调用（envi_doit、ENVIRaster、ENVITask）
2020年2月1日.好长时间没更新博客,还真有点不习惯.受新型冠性病毒的影响,平时街上熙熙攘攘的人流了无踪影,2020的春节竟然来的如此冷清.为响应“呆在家里就是做贡献的号召”,在家一宅就是十多天.闲 ...
- mIoU混淆矩阵生成函数代码详解
代码参考博客原文: https://blog.csdn.net/jiongnima/article/details/84750819 在原文和原文的引用里,找到了关于mIoU详尽的解释.这里重点解析 ...
- 创建一个JavaWeb工程
1.用到的工具:eclipse编译器+Tomcat9,在自己电脑上已配置好jdk和tomcat的环境变量 2.新建一个project 2.选择web文件中的Dynamic Web project,进入 ...
- JQuery教程之入门基础
语法 $(selector).action() selector:选择器,类似css中的选择器 比如: $('.buttons-tab a') --class为buttons-tab下的子元素a ac ...
- Solr系列4-SolrJ开发应用
1: Solr导入 1.1导入POM # Base Code Java org.apache.solr solr-solrj 8.4.0 # spring boot org.springframewo ...
- Java高级项目实战03：CRM系统数据库设计
接上一篇:Java高级项目实战02:客户关系管理系统CRM系统模块分析与介绍 欢迎点击回顾,接下来我们说说 CRM系统数据库设计. 我们根据产品的原型搞以及UI组的设计稿, 接下来就要设计数据库, 一 ...
- Github上优秀的.NET Core项目
Github上优秀的.NET Core开源项目的集合.内容包括:库.工具.框架.模板引擎.身份认证.数据库.ORM框架.图片处理.文本处理.机器学习.日志.代码分析.教程等. Github地址:htt ...