属性操作与事件（下）
事件进阶
执行事件的步骤：获取元素、绑定事件、书写事件驱动程序
监听事件
绑定监听事件
addEventListener
box1.addEventListener("click", myFunc)
function myFunc() {
this.style.backgroundColor = "blue";
}
解绑监听事件
removeEventListener("事件的类型",事件的处理程序)
box1.removeEventListener("click", myFunc);
元素的坐标
1、clientX与clientY
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。
2、pageX与e.pageY
pageX/Y：相对于文档边缘,包含滚动条距离
clientX/Y：相对于当前页面且不包含滚动条距离
有兼容性问题 从IE9以后才支持,pageY = clientY + 页面滚动出去的距离
事件冒泡
什么是冒泡事件
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。
<div>
<p>元素</p>
</div>
阻止事件冒泡
<body>
<div id="outer">
<p id=inner>这是盒子中的p标签</p>
我是div#outer
</div>
</body>
<script>
inner.addEventListener("click", function (event) {
// 阻止默认冒泡事件的发生
var event = event || window.event;
// propagation n. 传播; 英[ˌprɒpə'ɡeɪʃ(ə)n]
event.stopPropagation();
console.log("我单击到P元素上了！");
})
outer.addEventListener("click", function () {
console.log("我单击到div元素上了！");
})
</script>
阻止事件默认行为
<a href="http://www.baidu.com">测试</a>
$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
});
阻止a链接跳转
单return
第一种方法
<a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>
<a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>
function fn1() {
alert("单击链接了哈");
}
第一种缺点：代码不分离，不符合低耦合，高内聚的规范
双return
第二种方法
<a href="https://www.baidu.com" onclick="return fn2();">百度三下</a>
function fn2() {
alert("单击百度三了哈！");
return false;
}
第二种代码 缺点同上
先获取再绑定
第三种方法
<a href="https://www.baidu.com" id="link">百度四下</a>
document.getElementById("link").onclick = function () {
alert("单击百度四了哈！");
return false;
}
第三种 行为与结构分离
元素的属性操作
自定义属性
元素除了本身的属性之外可以设置自定义属性
<div id="box1" class="box_1" name1="divObj">我是盒子</div>
获取属性
getAttribute("属性的名字")
getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值
console.log(in1.getAttribute("type"));//text
console.log(in1.getAttribute("name"));//user
console.log(in1.getAttribute("id"));//text1
console.log(in1.getAttribute("style"));//color: red;
设置属性
setAttribute("属性的名字","属性的值");
元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性
setObj1.onclick = function () {
in1.setAttribute("name", "password");
// in1.setAttribute("class", "");
in1.className = "";
// in1.setAttribute("style", "border:5px dotted pink");
in1.style.border = "5px dotted pink";
console.log(in1.getAttribute("name"));//password
}
移除属性
removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性
var removeObj = document.getElementById("remove");
removeObj.onclick = function () {
in1.removeAttribute("class");
div1.removeAttribute("name1");
}
元素样式设置的几种方式
- 对象.style
- 对象.className
- 对象.setAttribute("style")
- 对象.setAttribute("class")
- 对象.style.setProperty("CSS属性","CSS属性值")
- 对象.style.cssText
<body>
<div class="box1" id="box1"></div>
<input type="button" value="改变样式" id="change">
</body>
<script>
var box = document.getElementById("box1");
var changeBtn = document.getElementById("change");
changeBtn.onclick = function () {
// 1、对象.style
// box.style.backgroundColor = "red";
// 2、对象.className
// box.className = "box2";
// 3、对象.setAttribute("style")
// box.setAttribute("style", "
// 4、对象.setAttribute("class")
// box.setAttribute("class", "box2");
// 5、对象.style.setProperty("CSS属性","CSS属性值")
// box.style.setProperty("background-color", "red");
// 6、对象.style.cssText
box.style.cssText = "red;height:80px";
}
</script>
浙公网安备 33010602011771号