sort排序默认js笔记js笔记js的简介js(5)

onmouseover:鼠标悬浮的事件

onmouseout:鼠标离开的事件

需求：div元素 鼠标移入变为绿色 移出恢复原色

#d1{background-color: red;width:200px;height: 200px;}

<div id="d1"></div>
<script type="text/javascript">
    var div = document.getElementById("d1");
    div.onmouseover = function(){
        this.style.backgroundColor = "green";
    };
    div.onmouseout = function(){
        this.style.backgroundColor = "red";
    };
</script>

onload:加载完毕的事件

等到页面加载完毕在执行onload事件所指向的函数

<span id="span"></span>
<script type="text/javascript">
    window.onload = function(){
        var span = document.getElementById("span");
        alert(span);
        span.innerHTML = "hello js";
};
</script>

将事件和响应行为都内嵌到html标签中

<input type="button" value="button"  onclick="alert('xxx')"/> 

将事件内嵌到html中而响应行为用函数进行封装

<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
    function fn(){
        alert("yyy");
    }
</script>

将事件和响应行为 与html标签完全分离

<input type="button" value="button"/>

<script type="text/javascript">

var btn = document.getElementById("btn");

btn.onclick = function(){

alert("zzz");

};

</script>

this关键字

this经过事件的函数进行传递的是html标签对象

<input type="button" value="button123"/>

<script type="text/javascript">

function fn(obj){

alert(obj.name);

}

</script>

IE：window.event.returnValue = false;

W3c: 传递过来的事件对象.preventDefault();

//W3c标准
if(e&&e.preventDefault){
    alert("w3c");
    e.preventDefault();
//IE标签
}else{
    alert("ie");
    window.event.returnValue = false;
}
//通过事件返回false也可以阻止事件的默认行为
<a href="demo11.html" onclick="return false">点击我吧</a>

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-74752-5.html