JavaScript事件及BOM和DOM

1. 事件

1.1 事件绑定

# 写在html元素中
<button onclick="code..."></div>

# 把事件当做元素对象的方法
btnEle.onclick = function(){
    
}

# 事件监听
btnEle.addEventListener('click', function(){
    
}, false)   fasle表示 冒泡阶段触发（默认）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的原理</title>
    <style>
        .active {
            background: pink;
        }
    </style>
</head>
<body>
    <h1>事件原理</h1>
    <hr>
    <button id="btn">按钮</button>

    <script>
        //事件绑定在一个元素上  
        //事件绑定

        var btn = document.querySelector('#btn');

        // function demo(){
            
        // }
        // 标准的绑定事件 添加事件监听 IE8不兼容   attachEvent('onclick', function)
        // 两次监听都会被捕获到
        btn.addEventListener('click', function(){
            alert(100)
        })

        btn.addEventListener('click', function(){
            alert(200)
        })


        
        //更常用-------把事件当做元素对象的方法
        btn.onclick = function(){
            this.classList.toggle('active');

        }






    </script>
</body>
</html>

事件

1.2 事件的捕获和冒泡

捕获阶段： 从祖先元素 到 子元素
冒泡阶段： 从子元素  到 祖先元素
事件默认在冒泡阶段触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的捕获和冒泡</title>
    <style>
        #wrapper {
            width: 200px;
            height: 200px;
            border: 2px solid pink;
            background-color: #ccc;
        }
        #inner {
            width: 100px;
            height: 100px;
            margin: 50px;
            background: green;
        }
    </style>
</head>
<body>
    
    <h1>同志交友</h1>
    <hr>
     <!--捕获阶段： 从祖先元素 到 子元素，=============》冒泡阶段： 从子元素  到 祖先元素 -->
    <div id="wrapper">
        <div id="inner"></div>
    </div>


    <script>
        //事件只在冒泡阶段触发的
        var wrapperEle = document.querySelector('#wrapper');
        var innerEle = document.querySelector('#inner');


        wrapperEle.onclick = function(){
            alert('我是大的');     //这是绑定事件执行的动画
        }

        innerEle.onclick = function(event) {
            alert('我是小的');
            event.stopPropagation(); //阻止冒泡，这样触发小的事件时就不会影响大的
        }
    </script>

</body>
</html>

事件捕获和冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的捕获和冒泡</title>
    <style>
        #wrapper {
            width: 200px;
            height: 200px;
            border: 2px solid pink;
            background-color: #ccc;
        }
        #inner {
            width: 100px;
            height: 100px;
            margin: 50px;
            background: green;
        }
    </style>
</head>
<body>
    
    <h1>同志交友</h1>
    <hr>

    <div id="wrapper">
        <div id="inner"></div>
    </div>


    <script>
        //默认false时：事件是在冒泡阶段触发的
        var wrapperEle = document.querySelector('#wrapper');
        var innerEle = document.querySelector('#inner');
        
        // 将默认的false给为true，事件的触发就会变为在捕获阶段触发，此时我们在加阻止冒泡也不起作用
        wrapperEle.addEventListener('click', function(){
            alert('我是大的');
        }, true)

        innerEle.addEventListener('click', function(event) {
            alert('我是小的');
            event.stopPropagation(); //阻止冒泡
        }, true)
    </script>

</body>
</html>

事件在捕获阶段触发

1.3 常用事件

鼠标事件

click       单击
dblcick      双击
contextmenu  右击
mouseenter    mouseover  鼠标悬停
mouseleave    mouseout   鼠标离开
mousedown   鼠标按键按下  
mouseup     鼠标按键抬起
mousemove   鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        
    </style>
</head>
<body>
    <h1>常用事件--鼠标事件</h1>
    <hr>

    <script>
        // 绑定给整个document，在窗口的任意位置右击都会触发该事件的执行
        document.oncontextmenu = function(){
            alert('啊，我被右击了');      //当我们鼠标右击，就会弹出对话框
            // return false; //阻止系统菜单
        }
    </script>
</body>
</html>

鼠标事件

键盘事件

keydown  键盘按键按下
keyup    键盘按键抬起
keypress  按键按下  只有可输入的按键才能触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box" style="left:100px;top:200px"></div>

    <script>
        // 将键盘事件绑定给document，这样我们只要键盘按下该事件就会被触发执行
        document.onkeydown = function(e){
            var boxEle = document.querySelector('#box');
            switch (e.keyCode) {
                case 37: //左键
                    boxEle.style.left = (parseInt(boxEle.style.left) - 5) + 'px';     //parseInt可以将字符串中的数字转换成数字
                    break;
                case 38: //上键
                    boxEle.style.top = (parseInt(boxEle.style.top) - 5) + 'px';
                    break;
                case 39: //右键
                    boxEle.style.left = (parseInt(boxEle.style.left) + 5) + 'px';
                    break;
                case 40: //下健
                    boxEle.style.top = (parseInt(boxEle.style.top) + 5) + 'px';
                    break;
                default: 
                    console.log(e.keyCode);       //点击除上下左右键会在控制台打印出该键对应的ASCII码
            }
        }
    </script>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        input {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            font-size: 16px;
        }

        #res {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 实现的效果是在表单中输入的内容，在表单的下方会同步显示 -->
    <input type="text" id="inputEle">
    <div id="res"></div>

    <script>
        // 先获取表单元素
        var inputEle = document.querySelector('#inputEle');
        // 将表单元素绑定给键盘抬起是触发的事件
        inputEle.onkeyup = function(){
            document.querySelector('#res').innerHTML = this.value;   //事件触发执行的函数体代码，获取div元素内容，将获取的表单元素内容赋值给该div元素
        }
    </script>
</body>
</html>

键盘事件2

表单事件

blur  失去焦点
focus  获取焦点
submit  提交 绑定给form元素
reset   重置 绑定给form元素
select  输入框内容被选中
change  内容改变切失去焦点   适合select 选项以改，触发
input   输出内容改变 触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单事件</title>
</head>
<body>
    <form action="1.php" id="myForm">
        用户名： <input type="text" id="userEle" name="username"> <br>    <!--内联元素不换行，所以我们为了达到效果，加了一个换行<br>-->
        密码：   <input type="password" id="pwdEle" name="pwd"> <br>
        <button>提交</button>
        <input type="reset" value="重置">
    </form>


    <script>
        // 先获取用户输入表单元素和整个表单元素
        var userEle = document.querySelector('#userEle');
        var formEle = document.querySelector('#myForm');
        // 失去焦点也就是鼠标点击输入框然后从输入框移走，点击了输入框以外的其他元素
        userEle.onblur = function() {
            console.log('失去焦点啦');      //失去焦点显示的内容是在控制打印出来的，当然你也可让他在前端页面显示你想要的效果
            // alert('失去焦点')
        }
        // 鼠标光标点击输入款就会获取焦点，在控制塔就会打印出内容
        userEle.onfocus = function() {
            console.log('获取焦点啦');
            //在失去焦点的时候，验证内容合法性
        }

        //选中输入框中的文字
        userEle.onselect = function() {
            console.log('啊，我被选了');
        }

        //对于输入框，内容改变 并且失去焦点 （没用）
        userEle.onchange = function() {
            console.log('啊，我变了');
        }

        //类似于 用的keyup 内容变化就触发   兼容性不好
        userEle.oninput = function(){
            console.log('啊，我变了');
        }


        //form表单的事件
        formEle.onsubmit = function() {
            alert('啊，我被提交了');
            return false; //阻止表单提交
        }
    </script>
</body>
</html>

表单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地址联动</title>
    <style>
        select {
            width: 100px;
            padding: 5px;
            font-size:16px;
        }
    </style>
</head>
<body>
    <h1>选择地址</h1>
    <hr>
    <select id="prov"></select>
    <select id="city"></select>

    <script>
        // 实现功能：当我们选中省份，就会显示该省份下下的所有城市
        //定义省市的信息
        var provList = ['江苏','浙江','福建','湖南'];
        var cityList = [];
        cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
        cityList[1] = ['杭州', '温州', '宁波', '台州'];
        cityList[2] = ['福州', '厦门', '泉州', '漳州'];
        cityList[3] = ['长沙', '湘潭', '株洲', '湘西'];

        //获取select元素
        var provSelect = document.querySelector('#prov');
        var citySelect = document.querySelector('#city');


        //把省的信息 添加到第一个select元素中
        provList.forEach(function(val, index){
            //DOM操作  了解
            provSelect.add(new Option(val, index))
        });


        //给第一个select绑定change事件
        provSelect.onchange = function(){
            //获取 当前的选项
            var index = this.value;

            //清空第二个select原先内容
            citySelect.length = 0;

            //选择对应的城市列表，添加到第二个select
            cityList[index].forEach(function(val, index){
                citySelect.add(new Option(val, index));
            })
        }


        //手工触发一次 change事件
        provSelect.onchange();






    </script>
</body>
</html>

应用：地址联动

文档事件

load      绑定给body 绑定给window 绑定给 img 、link、script   文档加载完成
unload    文档关闭
beforeunload  文档关闭之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档事件</title>
</head>
<body>
    <h1>文档事件</h1>
    <hr>
    <!-- <img src="http://www.google.com/1.jpg" alt=""> -->

    <script>
        window.onload = function(){
            //一些操作 必须等到页面中 所有的内容 加载完毕
            console.log('页面加载完毕');
            alert('页面加载完毕')
        }

        // 当我们关闭当前页面，就会触发该事件的执行
        window.onbeforeunload = function(){
            return '你确定要离开我码？';       //最新的Chrome不支持显示文字，ie浏览器可以显示文字
        }
    </script>
</body>
</html>

文档事件

图片事件

load   图片加载完毕
error  图片加载错误
abort  图片加载中断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片事件</title>
    <style>
        #imgList img {
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <h1>图片事件</h1>
    <hr>

    <div id="imgList">
        <img src="../../dist/images_one/1.jpg" alt="">
        <img src="../../dist/images_one/2.jpg" alt="">
        <img src="../../dist/images_one/3.jpg" alt="">
        <img src="../../dist/images_one/4.jpg" alt="">
        <img src="../../dist/images_one/41.jpg" alt="美图">
        <img src="../../dist/images_one/7.jpg" alt="">
        <img src="../../dist/images_one/8.jpg" alt="">
    </div>

    <script>
        //获取所有图片的列表img元素
        var imgs = document.querySelectorAll('#imgList img');

        //给每个img元素绑定 error 事件-----也就是当图片不存在是，我们为其重新指定一个url地址让其显示一张图片
        for (var i = 0; i < imgs.length; i ++) {
            imgs[i].onerror = function() {
                this.src = '../../dist/images_two/11.jpg'
            }
        }
    </script>
</body>
</html>

图片事件

其他事件

scroll   滚动
resize   大小调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他事件</title>
</head>
<body>
    <div style="height:20000px"></div>
    <script>
        // 将窗口绑定给滚动事件，当我们滚动滚动条，就会执行function内的函数体代码
        window.onscroll = function(){
            console.log('页面在滚动');
        }

        // 将窗口对象绑定给调整窗口大小的事件，当调整窗口大小时就会触发事件的执行
        window.onresize = function(){
            console.log(window.innerWidth, window.innerHeight)
        }
    </script>
</body>
</html>

其他事件

1.4 Event对象事件对象

属性
clientX  鼠标的坐标
clientY  鼠标的坐标
keyCode  键盘的按键 ascii码
button   鼠标按键  0 1 2
target   返回元素  具体触发的元素

方法
stopPropagation()  阻止事件冒泡
preventDefault()   阻止元素的默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
    <h1>event对象</h1>
    <hr>
    <form action="1.php">
        <button id="btn">按钮</button>
    </form>
    <script>
        // 先获取按钮元素
        var btn = document.querySelector('#btn');

        // 将元素对象绑定给单机按钮事件，当我们单机按钮时就会触发事件的执行
        btn.onclick = function(event){
            alert('啊，我被点击了');
            event.preventDefault(); //阻止元素的 默认动作就是当我们点击时就会跳转到一个新的页面，设置阻止元素的跳转，当我们在点击也不会跳转到新的页面
        }

        // event对象的target属性，就是当我们点击窗口的任意地方就会显示该地方所包含的元素内容
        document.onclick = function(event) {
            console.log(event.target)
        }
    </script>
</body>
</html>

事件对象event

2. BOM 浏览器对象模型

2.1 window

#属性
window.innerWidth   窗口的宽
window.innerHeight  窗口的高
history
location
screen
navigator


# 方法
setInterval()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()

2.2 history

属性
length  

方法
back() 后退一步
forward()  前进一步
go(1)  前进/后退 n 步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window</title>
</head>
<body>
    <button onclick="history.back()">上一步</button>
    <button onclick="history.forward()">下一步</button>
    <button onclick="history.go(-2)">上两步</button>
    <button onclick="history.go(1)">下1步</button>

    <hr>

    <a href="http://www.baidu.com">百度</a>

    <script>
        console.log(history)
        console.log(window.history)


        console.log(history.length); //历史记录的长度

    </script>
</body>
</html>

bom-history

2.3 location

属性
href
protocol
host
hostname
port
pathname
search
hash

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
</head>
<body>
    <script>
        console.log(location)          
        console.log(location.href)     //返回完整的URL
        console.log(location.protocol) //返回一个URL协议
        console.log(location.host);  //主机名和端口
        console.log(location.hostname) //返回URL的主机名
        console.log(location.port)  //返回一个URL服务器使用的端口号
        console.log(location.pathname) //返回URL的路径名
        console.log(location.search) //返回URL查询部分，就是url地址中？后面的部分
        console.log(location.hash)  //返回一个URL的锚部分，就是url地址中，#后面的部分


        location.href= "1.html"       //可以修改url地址
        location.hash = '#哈哈哈'   //可以修改url地址中的hash值
    </script>
</body>
</html>

bom-location

2.4 screen

屏幕

2.5 navigator

属性
userAgent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navigator</title>
</head>
<body>
    <script>
        console.log(navigator.userAgent)         //查看浏览器的版本信息
    </script>
</body>
</html>

bom-navigator

3. DOM 文档对象模型

3.1 常见的dom对象

所有的元素对象 都是dom
document  dom对象 表示整个文档
document.body  获取body元素
document.documentElement  获取HTML元素

3.3 元素内容

innerHTML
innerText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style>
        #box {
            padding: 20px;
            width: 600px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>


    <script>
        // 先获取元素
        var box = document.querySelector('#box');
        // 显示的双标签，以及双标签中的内容
        console.log(box.innerHTML)
        // 只显示双标签中的内容
        console.log(box.innerText)


        box.innerHTML = '<ul><li>HELLO</li></ul>'             //将获取的元素内容改成HELLO，而不是原样输出'<ul><li>HELLO</li></ul>'  
        // box.innerText = '<ul><li>HELLO</li></ul>'         //会原样输出'<ul><li>HELLO</li></ul>' 
    </script>
</body>
</html>

DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <style>    
        #todoList {
            list-style: none;
            margin:10px 0px;
            padding:0;
            width:600px;
        }
        #todoList li {
            margin-bottom:5px;
            padding: 10px;
            border: 1px solid #ccc;
            background:#f5f5f5;
            position: relative;
        }
        input {
            padding:10px;
            font-size:16px;
            border:1px solid #ccc;
        }
        button {
            padding:10px 20px;
            border:1px solid #ccc;
            background: #f5f5f5;
            outline: none;
            cursor: pointer;
        }

        #todoList span {
            position: absolute;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" id="content"> 
    <button id="btn">添加</button>
    <ul id="todoList">
        <li>去钓鱼 <span>&times;</span></li>
        <li>去洗澡 <span>&times;</span></li>
        <li>去吃饭 <span>&times;</span></li>
        <li>去睡觉 <span>&times;</span></li>
    </ul>


    <script>    
        // 实现功能：在输入框中输入的内容，可以在下面按照我们想要的格式原样输出，并且可以通过叉号将其删除
        // 先获取以下四个元素
        var input = document.querySelector('#content');
        var btn = document.querySelector('#btn');
        var todoList= document.querySelector('#todoList');
        var spans = document.querySelectorAll('#todoList span');


        btn.onclick = function(){
            //获取 input的内置
            var text = input.value;

            //创建li元素 并给li元素添加包裹 内容
            var li = document.createElement('li');
            li.innerText = text;
            var span = document.createElement('span');
            span.innerHTML = '&times;';
            li.appendChild(span);

            //把li元素添加到ul中
            todoList.appendChild(li);
        }    


        /*spans.forEach(function(span){
            span.onclick = function(){
                todoList.removeChild(this.parentNode)
            }
        })*/

        //委派方式绑定
        todoList.onclick = function(event) {
            if (event.target.nodeName === 'SPAN') {
                this.removeChild(event.target.parentNode);
            }
        }
    </script>
</body>
</html>

纯DOM操作

posted @ 2018-08-14 16:40 迎风而来阅读(497) 评论(0) 编辑收藏举报

刷新页面返回顶部

迎风而来

JavaScript事件及BOM和DOM

1. 事件

1.1 事件绑定

1.2 事件的捕获和冒泡

1.3 常用事件

鼠标事件

键盘事件

表单事件

文档事件

图片事件

其他事件

1.4 Event对象 事件对象

2. BOM 浏览器对象模型

2.1 window

2.2 history

2.3 location

2.4 screen

2.5 navigator

3. DOM 文档对象模型

3.1 常见的dom对象

3.3 元素内容

公告

1.4 Event对象事件对象