js常用事件，JS操作document对象

js常用事件

|---给元素添加事件的三种方式

|-----在标签元素内部添加事件

|------onclick事件：点击事件

|------ondbclick事件：双击事件

|------onload事件：页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中

|------onchange事件：当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

　　　　　　　　　说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果　　　　　　　　　是下拉框，则选择结束后即触发。

|------onblur事件和onfocus事件：onblur事件，当前元素失去焦点时触发该事件。对应的是onfocus事件：得到焦点事件

|------onscroll事件：窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move

|------鼠标相关事件：

1.onmousemove：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。

2.onmouseout：鼠标离开某对象范围时，触发事件调用函数。

3.onmouseover：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。

4.onmouseup：当鼠标松开时触发事件

5.onmousedown：当鼠标按下键时触发事件

|-----通过循环给多个元素添加事件

<body>
        <div class="one">111</div>
        <div class="one">222</div>
        <div class="one">333</div>
        <div class="one">444</div>
    </body>

<script type="text/javascript">
    var one  = document.getElementsByClassName("one");
    for(var i = 0;i<one.length;i++){
        one[i].onclick = function(){
            alert(this.innerHTML);
        }
    }
</script>

|-----通过addEventListener() 方法监听事件函数

|------无参数

<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

|------有参数

<button id="myBtn">点我</button>
<p id="demo"></p>

<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

|------移除监听事件：

removeEventListener() 方法

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

JS操作document对象

|---找到对象

document.getElementById()

返回对拥有指定 id 的第一个对象的引用。

document.getElementsByName()

返回带有指定名称的对象集合。

document.getElementsByTagName()

返回带有指定标签名的对象集合。

document.getElementsByClassName()

返回对拥有指定 class 的对象集合。

|---操作对象

|-----操作属性

1.取值：getAttribte()

document.getElementsByTagName("标签名")[0].getAttribute("属性名");

2.赋值：setAttribte()

document.getElementsByTagName("标签名")[0].setAttribute("属性名","属性值");

3.删除属性;removeAttribute()

document.getElementsByTagName("标签名")[0].removeAttribute("属性名");

|-----操作样式

1.内联样式：style.xxxx

2.class：

（1）className

（2）把class当成属性来看：element.className = 'blue';

|-----操作内容：

1.表单元素：value：

document.getElementById("id名字").value;

（1）文本框

（2）单选框

（3）复选框

2.非表单元素：

（1）innerHTML

document.getElementById("id名字").innerHTML="<a href='https://www.baidu.com'>到百度</a> ";

浏览器会将inneHTML后面的内容作为html来解析。

（2）innerText

document.getElementById("id名字").innerText="<a href='https://www.sina.com'>到新浪</a> ";

浏览器会将innerText后面的内容作为纯文本来解析。

posted @ 2018-08-29 21:48 井盖同学阅读(3315) 评论(0) 收藏举报

刷新页面返回顶部

井盖同学

js常用事件，JS操作document对象

公告