js-事件总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript事件总结</title>
    <style type="text/css">

        #box{
            width:300px;
            height: 300px;
            border: 2px solid #333;
            overflow: scroll;
            margin-left: 300px;

        }
        form textarea{
            margin-top: 30px;
        }
        img{
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 2px solid #333;
        }
    </style>

</head>
<body> 
    <div  id="box" >
        页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容
        页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容
        页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容
        页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容
        页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容
    </div>    
    <form>
        <input type="text" name="" placeholder="请输入..."><br>
        <textarea>
            
        </textarea><br>
        <select>
            <option>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>广东</option>
        </select><br>
        <img src="sdsdsd" title="图片标题"><br>
        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </form>


</body>
<script type="text/javascript">
            
//onload  事件会在页面或图像加载完成后立即发生。
    //在javascript 中
    // window.onload=function objfun(){
    //     alert("onload页面加载事件");
    // }

    //在html中
    //<body onload="objfun()">
    // function objfun(){
    //     alert("onload页面加载事件");
    // }

    //以下 HTML 标签支持 onload :
    //<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

//onunload  页面被卸载  窗口关闭或转到其它站点
    // window.onunload=function goodbye()
    // {
    //     console.log("感谢您访问 W3School!");
    //     return false;
    // }


//onbeforeunload事件在onunload 事件执行之前运行   不是所有的浏览器都允许在事件回调中window.alert(), window.confirm(), 和 window.prompt()
    // window.onbeforeunload=function(event){
    //       console.log("卸载前");
    //       return(false);

    // };

//onfocus  获得焦点事件

    // document.getElementsByTagName('input')[0].onfocus=function(){
    //     this.style.color = 'red';
    // }

//onblur对象失去焦点事件

    // document.getElementsByTagName('input')[0].onblur=function(){
    //     alert("失去焦点事件")
    // }

// onscroll  滚动条被卷动事件
    // document.getElementById('box').onscroll=function(){
    //     alert("滚动条滚动了")
    // }

//onresize  对象尺寸变化出发此事件   常用于 浏览器窗口被调整尺寸时。支持该事件的 JavaScript 对象：window
    //  html里写法 
        // <body onresize="onresize()"> 
        // function onresize(){
        //     alert("尺寸变化了触发此事件");
            
        // }
    //  js里写法
    // window.onresize=function(){
    //     alert('尺寸变化了触发此事件');
    // }

//onsubmit  提交按钮被点击      支持该事件的 JavaScript 对象：form
    
    //html里的写法
        //<form onsubmit="alert('提交表单')">
    
        // js里的写法

        // document.getElementsByTagName('form')[0].onsubmit=function(){
        //     alert("提交表单");
        // }

//onselect文本被选定时触发此事件  支持该事件的 HTML 标签：<input type="text">, <textarea>
    // var obj=document.getElementsByTagName('form')[0].children[0];
    // obj.onselect=function(){
    //     alert("文本已经被选中");
    // }
//onreset  事件会在表单中的重置按钮被点击时发生。   支持该事件的 HTML 标签：<form>

    // html里面
    // <form onreset="alert('重置事件被触发')">

    //js里面
    // document.getElementsByTagName('form')[0].onreset=function(){
    //     alert("重置消息")
    // }

//onmouseover 事件会在鼠标指针移动到指定的对象上时发生。 支持的标签由很多
    // document.getElementById('box').onmouseover=function(){
    //     this.style.backgroundColor = 'blue'
    // }

//onmouseout 事件会在鼠标指针移出指定的对象时发生。
    // document.getElementById('box').onmouseout=function(){
    //     this.style.backgroundColor = 'red'
    // }

//onmousemove 事件会在鼠标指针移动时发生。
    // document.getElementById('box').onmousemove=function(){
    //     alert("鼠标移动过")
    // }


//onmousedown 事件会在鼠标按键被按下时发生。支持的html标签有很多
    // document.getElementById('box').onmousedown=function(){
    //     alert('onmousedown  事件')
    // }

//onmouseup 事件会在鼠标按键被松开时发生。支持的html标签有很多
    // document.getElementById('box').onmouseup=function(){
    //     alert('onmouseup  事件')
    // }

//onchange 事件会在域的内容改变时发生。  支持该事件的 HTML 标签：<input type="text">, <select>, <textarea>
    // document.getElementsByTagName('select')[0].onchange=function(){
    //     alert('发生改变了')
    // }

//onkeydown 事件会在用户按下一个键盘按键时发生。 支持该事件的 HTML 标签：有很多
    // document.getElementsByTagName('input')[0].onkeydown=function(){
    //     alert("onkeydown 事件会在用户按下一个键盘按键时发生");
    // }
//onkeyup 事件会在键盘按键被松开时发生。 支持该事件的 HTML 标签：有很多
    // document.getElementsByTagName('input')[0].onkeyup=function(){
    //     alert("onkeyup 事件会在键盘按键被松开时发生。");
    // }

//onkeypress 事件会在键盘按键被按下并释放一个键时发生。 支持该事件的 HTML 标签：有很多

    // document.getElementsByTagName('input')[0].onkeypress=function(){
    //     alert("onkeypress 事件会在键盘按键被按下并释放一个键时发生");
    // }

//onclick   点击事件
    // document.getElementsByTagName('input')[0].onclick=function(){
    //     alert("onclick 点击事件")
    // }

//ondblclick    鼠标双击某个对象
    // document.getElementById('box').ondblclick=function(){
    //     this.style.color = 'yellow'
    // }

//onerror 事件会在文档或图像加载过程中发生错误时被触发。 支持该事件的 HTML 标签：<img>, <object>, <style>
// document.getElementsByTagName('img')[0].onerror=function(){
//     alert("图片加载失败了")
// }
</script>
</html>
posted @ 2017-11-23 12:04 Jinsuo 阅读(163) 评论(0) 收藏举报
刷新页面返回顶部
jinsuo

js-事件总结

公告
