【Web】0基础学Web—事件对象、事件委托（事件代理）—

本文链接：https://blog.youkuaiyun.com/2201_75539182/article/details/144893274

0基础学Web—事件对象、事件委托（事件代理）——星级评论案例

事件对象
事件委托—星级评论案例

事件对象

<body>
    <button>点击</button>
</body>

关闭鼠标右键的点击事件

<script>
    _button.addEventListener("contextmenu", function (event) {
        event.preventDefault()     
    })
</script>

关闭鼠标滚轮的事件

<script>
    _button.addEventListener("mousedown", function (event) {
        event.preventDefault()
        console.log(event.button)
    })
</script>

点击的目标对象

<script>
	_button.onclick = function (event) {
		console.log(event.target)
	}
</script>

点击鼠标的左键0 滚轮1 右键2

<script>
	_button.onclick = function (event) {
		console.log(event.button)
	}
</script>

获得被点击的节点的名称

<script>
	_button.onclick = function (event) {
		console.log(event.target.nodeName)
	}
</script>

或取相对于浏览器左上角的距离（会受页面滚动条的影响）

<script>
	_button.onclick = function (event) {
		console.log(event.clientX, event.clientY)
	}
</script>

获取相对于文档左上角的距离（不受滚动条的影响）

<script>
	_button.onclick = function (event) {
		console.log(event.pageX, event.pageY)
	}
</script>

事件委托—星级评论案例

<style>
    .active {
        color: red;
    }
</style>


<body>
    <div class="wrapper">
        <div class="first">
            <span class="active">❤</span>
            <span>❤</span>
            <span>❤</span>
            <span>❤</span>
            <span>❤</span>
        </div>
    </div>
    <script>
        //事件代理实现星级评论
        let _first = document.querySelector('.first')
        let _spans = document.querySelectorAll('span')
        _first.onclick = function (event) {
            let index = [..._spans].indexOf(event.target)
            console.log(index)
            for (const i in _spans) {
                if (i <= index) {
                    _spans[i].classList.add('active')
                } else {
                    if (_spans[i].classList != undefined) {
                        _spans[i].classList.remove('active')
                    }

                }
            }
        }

    </script>
</body>