> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Zepto 事件

## 一、Zepto Event 事件函数

### 1、$.Event(type,\[properties])

```javascript title="代码示例"
// 创建并初始化一个指定的DOM事件
$.Event("mylib:change", {
    bubbles: false,
});
```

### 2、$proxy(fn,context)

```javascript title="代码示例"
// 创建并初始化一个指定的DOM事件
let obj = {
        name: "Zepto",
    },
    handler = function () {
        console.log("hello Zepto ", this.name);
    };
$(document).on("click", $.proxy(handler, obj));
```

**注**：该方法接收一个函数，然后返回一个新函数，并且该新函数始终保持特定的上下文语境，新函数中的`this`指向`context`参数。

### 2、bind()：绑定事件函数

```javascript title="代码示例"
$("#app").bind("click", function (e) {
    alert("bind方法");
});
```

### 3、delegate()：绑定事件函数

```javascript title="代码示例"
$("#app").delegate("button", "click", function (e) {
    alert("delegate方法,推荐使用on绑定事件！");
});
```

### 4、off()：移除通过 on 添加的事件

```javascript title="代码示例"
$("#app").off("click", [Element], function (e) {
    alert("移除on绑定的事件！");
});
```

### 5、on()：添加一个处理事件到元素

```javascript title="代码示例"
var elem = $("#content");

elem.on("click", function (e) {});

elem.on("click", "nav a", function (e) {});

$(document).on("click", "a", function (e) {});
```

### 6、one()：添加一次点击事件

```javascript title="代码示例"
$("#btn").one("click", "a", function (e) {});
```

注：当第一次执行事件以后，该事件自动解除绑定，保证该处理函数在每个元素上最多执行一次。

### 7、trigger(event, \[args])：在对象集合的元素上触发指定的事件

```javascript title="代码示例"
// input上的focus事件触发，input获取焦点
$("input").trigger("focus");
```

### 8、triggerHandler(event, \[args])

```javascript title="代码示例"
// input上的focus事件触发，但是input不会获取焦点
$("input").triggerHandler("focus");
```

### 9、unbind()：移除通过 bind 注册的事件

```javascript title="代码示例"
// input上的focus事件触发，但是input不会获取焦点
$("#app").unbind("click", function (e) {});
```

## 二、DOM 节点&方法

### 1、reduce()：遍历当前对象集合

```javascript title="代码示例"
reduce(function (memo, index, array) {}, [initial]);
```

### 2、remove()：从其父节点中删除当前集合中的元素

```javascript title="代码示例"
$("#app div").remove();
```

### 3、removeAttr(name)：移除含有 name 的指定元素

```javascript title="代码示例"
$("#app div").removeAttr(".aaa");
```

### 4、removeClass(\[name])：移除元素 Class

```javascript title="代码示例"
$("#app div").removeClass("xc");
```

### 5、replaceWith()：用给定的内容替换所有匹配的元素

```javascript title="代码示例"
$("#app").replaceWith("abcd");
```

### 6、scrollLeft()：获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值

```javascript title="代码示例"
$("#app").scrollLeft();
```

### 7、scrollTop()：获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值

```javascript title="代码示例"
$("#app").scrollTop();
```

### 8、show()：恢复对象集合中每个元素默认的“display”值

```javascript title="代码示例"
$("#app").show();
```

### 9、siblings()：获取对象集合中所有元素的兄弟节点

```javascript title="代码示例"
$("#app").siblings();
```

### 10、size()：获取对象集合中元素的数量

```javascript title="代码示例"
$("ul li").size();
```

### 11、slice(start,\[end])：用给定的内容替换所有匹配的元素

```javascript title="代码示例"
var a11 = [1, 2, 3, 4, 5, 6, 7, 8];
var a_4 = a11.slice(4);
console.log(a_4);
```

**注**：提取这个数组**array**的子集，从**start**开始，如果给定**end**，提取从从**start**开始到**end**结束的元素，但是不包含**end**位置的元素。

### 12、text()：获取或者设置所有对象集合中元素的文本内容

```javascript title="代码示例"
// 获取文本
$("ul li").eq(0).text();

// 设置文本
$("ul li").eq(0).text("设置文本内容");
```

### 13、toggle()：显示或隐藏匹配元素

```javascript title="代码示例"
$("#box").toggle(true); // true => show false=> hide
```

### 14、toggleClass()：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类

```javascript title="代码示例"
$("#box").toggleClass("bt");
```

### 15、unwrap()：移除集合中每个元素的直接父节点，并把他们的子元素保留在原来的位置

```javascript title="代码示例"
$("ul li").unwrap();
```

### 16、val()：获取或设置匹配元素的值

```javascript title="代码示例"
// 获取元素值
$("input").val();

// 设置元素值
$("input").val("姓名");
```

### 17、wrap()：在每个匹配的元素外层包上一个 html 元素

```javascript title="代码示例"
$("span").wrap("p");
```

### 18、wrapAll()：在所有匹配元素外面包一个单独的结构

```javascript title="代码示例"
$("ul li").wrapAll("div");
```

### 19、wrapInner()：将每个元素中的内容包裹在一个单独的结构中

```javascript title="代码示例"
$("ul li").wrapInner("div");
```

### 20、width()：获取或者设置元素对象的宽度

```javascript title="代码示例"
// 获取id为app元素的宽度
$("#app").width();

// 为元素设置宽度
$("#app").width(100);
```

## 三、Ajax 请求

### 1、$.ajax()

```javascript title="代码示例"
// GET请求
$.ajax({
    type: "GET",
    url: "url",
    data: {
        name: "xxx",
    },
    dataType: "json",
    timeout: 300,
    context: $("body"),
    success: function (data) {},
    error: function (xhr, type) {},
});

// POST 请求：需要通过JSON.stringify()将参数转化为JSON字符串
$.ajax({
    type: "POST",
    url: "url",
    data: JSON.stringify({
        name: "xxx",
    }),
    success: function (data) {},
    error: function (xhr, type) {},
});
```

:::tip 注意事项

1. **beforeSend(xhr, settings)**：请求发出前调用，它接收 **xhr** 对象和 **settings** 作为参数对象。如果它返回 **false**，请求将被取消。
2. **success(data, status, xhr)**：请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。
3. **error(xhr, errorType, error)**：请求出错时调用。 (超时，解析错误，或者状态码不在 HTTP 2xx)。
4. **complete(xhr, status)**：请求完成时调用，无论请求失败或成功。

:::

### 2、$.get()：Ajax GET 请求

```javascript title="代码示例"
$.get(
    "url",
    function (response) {
        $(document.body).append(response);
    },
    [dataType]
);
```

### 3、$.post()：Ajax POST 请求

```javascript title="代码示例"
// POST请求简写方式
$.post(
    "/url",
    {
        sample: "xxx",
    },
    function (response) {
        console.log(response);
    }
);

// 参数可以为一个字符串
$.post("url", $("#app").serialize(), function (response) {
    console.log(response);
});
```

### 4、$.getJSON()

```javascript title="代码示例"
$.getJSON("xxx.json", function (data) {
    console.log(data);
});

// callback()回调函数
$.getJSON("xxx.json?callback=?", function (remoteData) {
    console.log(remoteData);
});
```