JavaScript，简称JS，是Web开发中的重要脚本语言，它主要负责网页的动态效果和交互。在本资料中，我们重点探讨的是JavaScript的一些常见技巧，包括事件处理和函数的运用，通过实例来深入理解这些概念。
一、事件
在JavaScript中，事件是用户或浏览器与页面交互时发生的特定情况。例如，当用户点击按钮、滚动页面或者提交表单时，就会触发相应的事件。我们可以通过事件监听器来响应这些事件。以下是一个简单的点击事件的例子：
```javascript
// 获取HTML元素
var button = document.getElementById('myButton');
// 添加点击事件监听器
button.addEventListener('click', function() {
alert('按钮被点击了！');
});
```
在这个例子中，`addEventListener`方法用于监听'click'事件，当用户点击id为'myButton'的按钮时，会弹出一个警告框显示“按钮被点击了！”。
二、函数
函数是JavaScript中可重用的代码块，它们可以接受参数并返回值。函数定义如下：
```javascript
// 定义一个函数
function greet(name) {
console.log('Hello, ' + name + '!');
}
// 调用函数
greet('John'); // 输出 "Hello, John!"
```
在上面的代码中，`greet`是一个函数，它接收一个参数`name`，并在控制台打印出问候语。当我们调用`greet('John')`时，函数体内的代码被执行，将输出"Hello, John!"。
三、函数表达式
除了函数声明，JavaScript还支持函数表达式，这是一种创建匿名函数的方式。例如，常见的闭包和立即执行函数表达式（IIFE）：
```javascript
// 闭包示例
var counter = (function() {
var count = 0;
return function() {
return count++;
};
})();
console.log(counter()); // 输出 0
console.log(counter()); // 输出 1
```
这个例子展示了闭包的概念，内部函数可以访问并修改外部函数的变量，即使外部函数已经执行完毕。
四、函数参数默认值
ES6引入了一项新特性，允许我们在函数定义时为参数设置默认值：
```javascript
function sayHello(name = 'World') {
console.log('Hello, ' + name + '!');
}
sayHello(); // 输出 "Hello, World!"
sayHello('Alice'); // 输出 "Hello, Alice!"
```
在这里，如果`sayHello`函数没有传入参数，`name`将会被赋予默认值'World'。
五、事件委托
事件委托是一种优化事件处理的技术，通过将事件监听器添加到父元素上，处理子元素的事件。这样可以减少内存占用，提高性能：
```html
<div id="container">
<button class="item">Item 1</button>
<button class="item">Item 2</button>
<button class="item">Item 3</button>
</div>
<script>
var container = document.getElementById('container');
container.addEventListener('click', function(event) {
if (event.target.classList.contains('item')) {
console.log('点击了子元素');
}
});
</script>
```
在这个例子中，我们只在`container`元素上添加了一个事件监听器，当点击任一`.item`按钮时，事件会被冒泡到`container`，并执行相应的逻辑。
六、模块化
随着JavaScript应用变得越来越复杂，模块化成为组织代码的重要方式。ES6引入了`import`和`export`关键字来实现模块导入和导出：
```javascript
// module1.js
export function sayHi() {
console.log('Hi from Module 1');
}
// module2.js
import { sayHi } from './module1';
sayHi(); // 输出 "Hi from Module 1"
```
这里，`module1.js`导出了一个函数`sayHi`，`module2.js`通过`import`导入并使用它。
总结，JavaScript的事件处理和函数运用是其强大之处，通过理解并熟练掌握这些技巧，可以编写出更高效、更易于维护的代码。不断学习和实践，将使你在JavaScript的世界里游刃有余。
js常用技巧.rar （1个子文件） 
js常用技巧.doc 182KB
