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)行间式: ...
随机推荐
- HDU_1166_树状数组
http://acm.hdu.edu.cn/showproblem.php?pid=1166 树状数组入门题. #include<iostream> #include<cstring ...
- WeChall_Training: Get Sourced (Training)
The solution is hidden in this page Use View Sourcecode to get it 解题: 网页源码,最后一行 <!-- You are look ...
- Codeforces Global Round 3(A-D)
我凉了..感觉自己啥都不会做,搞不好起床就绿了啊 代码和反思起床补,今天要反了个大思的 A. Another One Bites The Dust 把所有的ab排在一起然后两边叉a和b #includ ...
- 12-Java-myeclipse集成Tomcat步骤及Tomcat的使用步骤
一.了解Tomcat Tomcat是由Apache推出的一款免费开源的servlet容器/web应用服务器,可实现javaweb程序的装载,是配置JSP和java系统必备的一款环境 Tomcat目 ...
- Python3(十二) Pythonic与Python杂记
一.用字典映射代替switch case语句 if/else可以代替switch但是非常不合适. 用字典代替switch: day = 5 switcher = { 0:'Sunday', 1:'Mo ...
- java 子线程定时去更改主线程的变量
在一次代码编写场景,需要post一些数据,同时携带获得的token,(但是token的有效时间是7200s),但是post需要很多次,很长时间,不可能2小时候中断程序,手动去获取token,这样效率太 ...
- CentOS7及Docker配置中文字符集问题
说明 Linux系统默认使用英文字符集,不会安装中文字符集等其他字符. 查看当前字符集 $ 安装字符集 使用locale命令看看当前系统所使用的字符集 $ locale LANG=en_US.UTF- ...
- Mysql 字符问题
先看一下mysql支持的字符范围 *数值类型:1.整形: 类型 大小 范围 ...
- backgroud图片充满元素的方法
background-image: url("img/headimg.png"); height: 219px; background-size: 100% 100%; backg ...
- js—数字那些事儿
进制之间互相转化 a=133 十进制转成其他进制 a.toString(num) a.toString(2); //转化成二进制,返回"10000101" a.toString(8 ...