事件:
所谓事件,是指 JavaScript 捕获到用户的操作,并做出正确的响应。
在事件函数里面,有一个关键字this,代表当前触发事件的这个元素
事件:用户的操作
元素.事件 = 函数;
鼠标事件: 左键单击 onclick 左键双击 ondblclick 鼠标移入 onmouseover/onmouseenter
鼠标移出 onmouseout/onmouseleave ***
<div id="box"> 测试鼠标事件 </div> <script> // 鼠标事件 var oBox=document.getElementById("box"); oBox.onclick=function () { console.log("我被点击了"); //onlick后打印到控制台 this.innerHTML = "我被点击了"; //nlick后修改内容
}
</script>
-- 通过classname 记得选择下标
var oBox=document.getElementsByClassName("box");
oBox[0].onclick=function () {
console.log("我被点击了");
this.innerHTML = "我被点击了";
}
------------------------------------
通过classname选中标签 必须加下标 *****
操作标签属性:
<a href="http://www.baidu.com" target="_self" id="box1" class="box1">百度</a>
var oCls=document.getElementsByClassName("box1");
alert(oCls[0].id) // 弹出id
alert(oCls[0].className) // 弹出 classname
alert(oCls[0].target) // 弹出 a标签打开的方式 _self
// 1.修改规范的属性 通过 . 来操作属性简单点,也可以通过不规范的方法来操作
oCls[0].target="_blank"; // 修改a标签属性target 也可以不给属性值 给空。
alert(oCls[0].target); // 弹出 _blank
//2.修改不规范的属性
不规范(自定义)的标签属性:
获取:.getAttribute
设置:.setAttribute
移除:.removeAttribute
console.log(oCls[0].getAttribute("tj")); // 获取
console.log(oCls[0].setAttribute("tj","+100W")); // 修改
console.log(oCls[0].removeAttribute("tj")); // 移除属性
这里JS修改属性,是通过修改行内样式,优先级最高