前端设计师必备：JS代码精华与事件处理技巧

本文档汇集了一些前端设计师在日常工作中最常使用的JavaScript（JS）代码片段，主要涵盖HTML5 DOM（Document Object Model）选择器、事件处理和阻止默认行为、阻止事件冒泡以及鼠标滚轮事件的处理。以下将详细介绍这些关键知识点： 1. HTML5 DOM选择器 - `querySelector()` 方法：这是JavaScript中用于获取指定CSS选择器的第一个匹配元素的API。例如： ```javascript var item = document.querySelector('.item'); ``` 这会返回第一个class为"item"的DOM元素，并将其赋值给变量`item`。 - `querySelectorAll()` 方法：此函数返回所有匹配指定CSS选择器的元素集合，作为NodeList对象。例如： ```javascript var items = document.querySelectorAll('.item'); console.log(items[0]); // 输出第一个匹配元素 ``` 2. 阻止默认行为 - 原生JavaScript：为了阻止元素的默认动作，如链接跳转或表单提交，可以捕获`click`事件并使用`event.preventDefault()`方法： ```javascript document.getElementById('btn').addEventListener('click', function(event) { event = event || window.event; // 处理兼容性问题 event.preventDefault(); // 阻止默认行为 }, false); ``` - jQuery中的处理方式类似，但语法更简洁： ```javascript $('#btn').on('click', function(event) { event.preventDefault(); }); // 或者，使用链式调用： $('#btn').on('click', '.preventDefault()'); ``` 3. 阻止事件冒泡 - 事件冒泡是从最具体的元素向最不具体的元素逐级传播。通过`event.stopPropagation()`可以阻止事件在DOM树上继续向上传播： ```javascript document.getElementById('btn').addEventListener('click', function(event) { event = event || window.event; event.stopPropagation(); // 阻止事件冒泡 }, false); ``` - 在IE中，使用`event.cancelBubble = true;` 4. 鼠标滚轮事件 - 对于滚动事件，可以监听`mousewheel`或`DOMMouseScroll`事件，根据浏览器兼容性进行处理： ```javascript $('#content').on("mousewheel DOMMouseScroll", function(event) { var delta = (event.originalEvent.wheelDelta || -event.originalEvent.detail); // 获取滚轮滚动方向 // 处理滚动逻辑，delta > 0 表示向上滚动，delta < 0 表示向下滚动 }); ``` - 注意这里的`originalEvent`属性用于兼容不同浏览器的行为。 以上代码片段是前端开发中常见的基础操作，熟练掌握它们有助于提高工作效率和代码可维护性。在实际项目中，根据具体需求可能还需要结合其他库或框架，如jQuery、Vue.js或React，来实现更丰富的交互效果。