درس ۴۱ از ۴۵ · صفحه‌های وب

کشیدن، لمس، پیمایش و پنجره

صفحه اغلب باید چیزی را دنبال کند که حرکت می‌کند: کارتی که روی صفحه برده می‌شود، انگشتی روی گوشی، نوار پیمایش، اندازه‌ی پنجره. این درس ۲۷ رویداد مربوط به این کارها را می‌گوید، هر ایده را در صفحه‌ای که اجرا می‌شود نشان می‌دهد و دام‌هایی را توضیح می‌دهد که کشیدن و رها کردن را در تلاش اول خراب می‌کنند.

در این درس

رویدادهایی که حرکت می‌کنند
کشیدن و رها کردن
بازخورد هنگام کشیدن
جابجا کردن مورد میان فهرست‌ها
رویدادهای اشاره‌گر
ورود و خروج
رویدادهای لمس
پیمایش و اتمام پیمایش
پنجره و تصویرها
مرجع: همه‌ی رویدادهای این درس
خودتان امتحان کنید

رویدادهایی که حرکت می‌کنند

ویژگی رویداد یک تابع می‌گیرد. می‌توانید نام تابعی را بدهید که بالای بلوک صفحه: نوشته‌اید، یا یک لامبدای کوتاه مثل (): دام.تنظیم متن(دام.با شناسه("out")، "سلام") پایان، یا یک رشته‌ی ساده‌ی جاوااسکریپت. تابعی که خود رویداد را لازم دارد یک پارامتر رویداد: صحیح۶۴ می‌گیرد و آن را به کمک‌تابع‌های بسته‌ی دام می‌دهد: دام.رویداد افقی(رویداد)، دام.جلوگیری پیش فرض(رویداد)، دام.دریافت خاصیت(رویداد، "dataTransfer") و مانند آن‌ها. درس رویدادهای ماوس این الگو را کامل توضیح می‌دهد. در اینجا آن را برای رویدادهایی به کار می‌برید که از کلیک داده‌ی بیشتری می‌آورند: انگشت کجاست، چه چیزی کشیده می‌شود، صفحه چقدر پیمایش شده.

یک نکته‌ی نوشتاری: پایان به‌تنهایی عنصر را می‌بندد، برای همین رویدادهایی که در انگلیسی با «end» تمام می‌شوند در نام فارسی‌شان اتمام دارند: اتمام کشیدن، اتمام ضبط اشاره‌گر، اتمام لمس و اتمام پیمایش.

کشیدن و رها کردن

HTML کشیدن و رها کردن خودش را دارد و سه بخش لازم است. عنصری که برمی‌دارید کشیدنی = درست دارد و یک رویدادگیر شروع کشیدن که چیزی را در dataTransfer می‌گذارد، همان بسته‌ی کوچکی که مرورگر در طول کشیدن با خود می‌برد. جایی که رها می‌کنید یک رویدادگیر عبور کشیدن دارد که دام.جلوگیری پیش فرض را صدا می‌زند، چون مرورگر هر رها کردنی را رد می‌کند مگر به او بگویند این جا یکی را می‌پذیرد. و همان جا یک رویدادگیر رها کردن دارد که بسته را بیرون می‌آورد.

در نمونه بسته متنِ parcel است که با دام.فراخوان رشته دو(انتقال، "setData"، ...) گذاشته می‌شود. هنگام رها کردن، getData آن را پس می‌دهد و رویدادگیر با آن عنصر را پیدا می‌کند و به ناحیه می‌برد. دام.دریافت خاصیت(رویداد، "dataTransfer") بسته را به‌شکل یک شیء می‌دهد و دام.فراخوان رشته یک و دام.فراخوان رشته دو متدهایش را با یک یا دو رشته صدا می‌زنند.

web-drag-basic.salam

واردسازی دام

تابع بردار(رویداد: صحیح۶۴):
    انتقال := دام.دریافت خاصیت(رویداد، "dataTransfer")
    _ := دام.فراخوان رشته دو(انتقال، "setData"، "text/plain"، "parcel")
پایان

تابع اجازه(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
پایان

تابع فرود(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    انتقال := دام.دریافت خاصیت(رویداد، "dataTransfer")
    کد کالا := دام.فراخوان رشته یک(انتقال، "getData"، "text/plain")
    دام.افزودن(دام.با شناسه("zone")، دام.با شناسه("" + کد کالا))
    دام.تنظیم متن(دام.با شناسه("status")، "بسته رها شد.")
پایان

صفحه:
    عنوان = "کشیدن و رها کردن"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: شناسه = "parcel" کشیدنی = درست شروع کشیدن = بردار
        محتوا = "بسته" نمایش = "inline-block" فاصله = "10px 20px" نشانگر = گرفتن
        پس زمینه = "#fde68a" گردی کادر = 6
    پایان
    جعبه: شناسه = "zone" عبور کشیدن = اجازه رها کردن = فرود
        فضا بالا = 20 فاصله = 30 کمینه ارتفاع = 40 کادر = "2px dashed #94a3b8" گردی کادر = 8
        محتوا = "ناحیه‌ی رها کردن"
    پایان
    پاراگراف: شناسه = "status" محتوا = "بسته را روی ناحیه بکشید." پایان
پایان

رایج‌ترین دلیل بی‌اثر ماندن رها کردن، نبودن رویدادگیر عبور کشیدن است. دومی، نبودن setData در شروع کشیدن است: فایرفاکس بدون آن اصلاً کشیدن را شروع نمی‌کند. هر دو را بنویسید، حتی وقتی به داده نیاز ندارید.

بازخورد هنگام کشیدن

چهار رویداد دیگر می‌گویند چه می‌گذرد. کشیدن بارها روی عنصر کشیده‌شده رخ می‌دهد، اتمام کشیدن یک بار وقتی کشیدن تمام می‌شود، و ورود کشیدن و خروج کشیدن روی جاهایی که چیز کشیده‌شده از آن‌ها می‌گذرد. ناحیه‌ی رها کردن معمولاً از دو تای آخر برای اضافه و برداشتن رنگ‌آمیزی استفاده می‌کند: کلاسی که عنصر ظاهر سفارشی: تعریف می‌کند و با دام.افزودن کلاس و دام.حذف کلاس روشن و خاموش می‌شود.

نمونه در اتمام کشیدن مقدار dataTransfer.dropEffect را هم می‌خواند. اگر چیز کشیده‌شده جایی رها شده باشد که آن را نپذیرفته، مقدار none است، پس می‌توانید رها کردن موفق را از لغوشده تشخیص دهید. مقدارهای دیگر (copy، move) به مرورگر بستگی دارند، پس فقط با none مقایسه کنید.

web-drag-feedback.salam

واردسازی دام

ناپایا شمار := ۰

تابع آغاز(رویداد: صحیح۶۴):
    انتقال := دام.دریافت خاصیت(رویداد، "dataTransfer")
    _ := دام.فراخوان رشته دو(انتقال، "setData"، "text/plain"، "note")
    شمار = ۰
    دام.تنظیم متن(دام.با شناسه("log")، "شروع کشیدن")
پایان

تابع کشش():
    شمار += ۱
    دام.تنظیم متن(دام.با شناسه("log")، "رویداد کشیدن " + شمار + " بار رخ داد")
پایان

تابع اجازه(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
پایان

تابع ترک():
    دام.حذف کلاس(دام.با شناسه("zone")، "hot")
پایان

تابع فرود(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    ترک()
پایان

تابع خاتمه(رویداد: صحیح۶۴):
    اثر := دام.دریافت خاصیت رشته ای(دام.دریافت خاصیت(رویداد، "dataTransfer")، "dropEffect")
    دام.تنظیم متن(دام.با شناسه("log")، "پایان کشیدن، dropEffect = " + اثر)
پایان

صفحه:
    ظاهر سفارشی: محتوا = ".hot { background: #dcfce7; border-color: #16a34a }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: شناسه = "note" کشیدنی = درست
        شروع کشیدن = آغاز
        کشیدن = کشش
        اتمام کشیدن = خاتمه
        محتوا = "برگه‌ی یادداشت" نمایش = "inline-block" فاصله = "10px 20px" پس زمینه = "#fde68a"
    پایان
    جعبه: شناسه = "zone" عبور کشیدن = اجازه
        ورود کشیدن = (): دام.افزودن کلاس(دام.با شناسه("zone")، "hot") پایان
        خروج کشیدن = ترک رها کردن = فرود
        محتوا = "اینجا رها کنید" فضا بالا = 20 فاصله = 30 کادر = "2px dashed #94a3b8" گردی کادر = 8
    پایان
    پاراگراف: شناسه = "log" محتوا = "هنوز چیزی رخ نداده." پایان
پایان

جابجا کردن مورد میان فهرست‌ها

تخته‌ای با چند ستون همان دستور است با یک تغییر: رویدادگیرها مشترک‌اند. شروع کشیدن شناسه‌ی کارت را در بسته می‌گذارد و رها کردن هر ستون شناسه را می‌خواند، کارت را با دام.با شناسه پیدا می‌کند و به ستونی که رها را گرفته می‌افزاید. دام.دریافت خاصیت(رویداد، "currentTarget") عنصری است که رویدادگیر به آن بسته شده، پس یک تابع به کار همه‌ی ستون‌ها می‌آید، حتی وقتی رها کردن روی کارتی درون ستون بیفتد. هر کارت و هر ستون در اینجا یک بخش (کامپوننت) است که صفحه را کوتاه نگه می‌دارد.

web-drag-board.salam

واردسازی دام

بخش کارت(کد، برچسب):
    جعبه: شناسه = کد کشیدنی = درست شروع کشیدن = بردار محتوا = برچسب
        فاصله = "8px 12px" فضا پایین = 8 پس زمینه = "white" گردی کادر = 6 نشانگر = گرفتن
    پایان
پایان

بخش ستون(کد، برچسب):
    جعبه: شناسه = کد عبور کشیدن = اجازه خروج کشیدن = ترک رها کردن = فرود
        پس زمینه = "#e2e8f0" گردی کادر = 8 فاصله = 12 کمینه ارتفاع = 140 عرض = 150
        سرتیتر: اندازه = 3 محتوا = برچسب فضا = "0 0 10px" پایان
        محتوا: پایان
    پایان
پایان

تابع بردار(رویداد: صحیح۶۴):
    انتقال := دام.دریافت خاصیت(رویداد، "dataTransfer")
    _ := دام.فراخوان رشته دو(انتقال، "setData"، "text/plain"، دام.دریافت خاصیت رشته ای(دام.هدف رویداد(رویداد)، "id"))
پایان

تابع اجازه(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    دام.افزودن کلاس(دام.دریافت خاصیت(رویداد، "currentTarget")، "hot")
پایان

تابع ترک(رویداد: صحیح۶۴):
    دام.حذف کلاس(دام.دریافت خاصیت(رویداد، "currentTarget")، "hot")
پایان

تابع فرود(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    ستون کار := دام.دریافت خاصیت(رویداد، "currentTarget")
    دام.حذف کلاس(ستون کار، "hot")
    کد کارت := دام.فراخوان رشته یک(دام.دریافت خاصیت(رویداد، "dataTransfer")، "getData"، "text/plain")
    دام.افزودن(ستون کار، دام.با شناسه("" + کد کارت))
پایان

صفحه:
    ظاهر سفارشی: محتوا = ".hot { outline: 2px solid #2563eb }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: نمایش = فلکس شکاف = 16
        ستون: کد = "todo" برچسب = "باید انجام شود" کارت: کد = "t1" برچسب = "نوشتن" پایان کارت: کد = "t2" برچسب = "آزمایش" پایان پایان
        ستون: کد = "doing" برچسب = "در دست کار" کارت: کد = "t3" برچسب = "بازبینی" پایان پایان
        ستون: کد = "done" برچسب = "انجام شد" پایان
    پایان
پایان

مرتب کردن درون یک فهرست یک تصمیم می‌خواهد: پیش از ردیفی که رویش رها کردید یا بعد از آن؟ نمونه ارتفاع اشاره‌گر را با وسط آن ردیف مقایسه می‌کند، که از getBoundingClientRect می‌آید، و بعد ردیف‌ها را با دام.افزودن به ترتیب تازه برمی‌گرداند؛ این تابع عنصری را که از قبل در صفحه است جابجا می‌کند.

web-drag-sort.salam

واردسازی دام

ناپایا برداشته := ۰ برگردان صحیح۶۴

بخش ردیف(کد، برچسب):
    جعبه: شناسه = کد کشیدنی = درست شروع کشیدن = بردار عبور کشیدن = اجازه رها کردن = فرود
        محتوا = برچسب فاصله = "10px 14px" فضا پایین = 6 پس زمینه = "#f1f5f9" گردی کادر = 6 نشانگر = گرفتن
    پایان
پایان

تابع بردار(رویداد: صحیح۶۴):
    برداشته = دام.هدف رویداد(رویداد)
    _ := دام.فراخوان رشته دو(دام.دریافت خاصیت(رویداد، "dataTransfer")، "setData"، "text/plain"، "row")
پایان

تابع اجازه(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
پایان

تابع فرود(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    هدف := دام.دریافت خاصیت(رویداد، "currentTarget")
    مستطیل := دام.فراخوان(هدف، "getBoundingClientRect")
    وسط := دام.دریافت خاصیت عددی(مستطیل، "top") + دام.دریافت خاصیت عددی(مستطیل، "height") / ۲.۰
    بالاتر := دام.رویداد عمودی(رویداد) کوچکتر وسط
    فهرست := دام.با شناسه("list")
    ردیف ها := دام.پرسمان همه("#list > div")
    تکرار دام.تعداد(ردیف ها) در ش:
        ردیف := دام.عنصر شماره(ردیف ها، ش)
        اگر ردیف برابر هدف:
            اگر بالاتر: دام.افزودن(فهرست، برداشته) پایان
            دام.افزودن(فهرست، ردیف)
            اگر وارونه بالاتر: دام.افزودن(فهرست، برداشته) پایان
        وگرنه ردیف نابرابر برداشته:
            دام.افزودن(فهرست، ردیف)
        پایان
    پایان
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 بیشینه عرض = 320 پایان
    جعبه: شناسه = "list"
        ردیف: کد = "a" برچسب = "بیدار شدن" پایان
        ردیف: کد = "b" برچسب = "دم کردن چای" پایان
        ردیف: کد = "c" برچسب = "خواندن درس" پایان
        ردیف: کد = "d" برچسب = "نوشتن یک صفحه" پایان
    پایان
    پاراگراف: شناسه = "hint" محتوا = "یک ردیف را به جای تازه بکشید." پایان
پایان

رویدادهای اشاره‌گر

ماوس، قلم و انگشت هر سه اشاره‌گرند و رویدادهای اشاره‌گر با یک دسته نام همه را پوشش می‌دهند: فشردن اشاره‌گر، حرکت اشاره‌گر و رها کردن اشاره‌گر. کد تازه این‌ها را به کار می‌برد و mouse down و touch start را برای صفحه‌های قدیمی می‌گذارد، چون یک رویدادگیر آنوقت روی همه‌ی دستگاه‌ها کار می‌کند. event.pointerType می‌گوید کدام دستگاه بوده.

نمونه توپی را با دست می‌کشد، بدون کشیدن و رها کردن HTML. در فشردن اشاره‌گر جای اشاره‌گر و توپ را به یاد می‌سپارد. در هر حرکت اشاره‌گر فاصله‌ی پیموده‌شده را با دام.تنظیم سبک به جای توپ می‌افزاید. فراخوانی مهم setPointerCapture است: به مرورگر می‌گوید همه‌ی رویدادهای بعدی این اشاره‌گر را به توپ بدهد، حتی وقتی اشاره‌گر از توپ جلو بزند یا از آن بیرون برود. رویدادهای شروع ضبط اشاره‌گر و اتمام ضبط اشاره‌گر می‌گویند این کار کی شروع و کی تمام می‌شود. ویژگی کنش لمسی = هیچ نمی‌گذارد انگشت به‌جای آن صفحه را پیمایش کند.

web-drag-pointer.salam

واردسازی دام

ناپایا کشیده می‌شود := نادرست
ناپایا شروع افقی := ۰.۰
ناپایا شروع عمودی := ۰.۰
ناپایا پایه افقی := ۰.۰
ناپایا پایه عمودی := ۰.۰

تابع بگیر(رویداد: صحیح۶۴):
    توپ := دام.هدف رویداد(رویداد)
    _ := دام.فراخوان یک(توپ، "setPointerCapture"، دام.دریافت خاصیت عددی(رویداد، "pointerId"))
    کشیده می‌شود = درست
    شروع افقی = دام.رویداد افقی(رویداد)
    شروع عمودی = دام.رویداد عمودی(رویداد)
    پایه افقی = دام.دریافت خاصیت عددی(توپ، "offsetLeft")
    پایه عمودی = دام.دریافت خاصیت عددی(توپ، "offsetTop")
    دام.تنظیم متن(دام.با شناسه("info")، "اشاره‌گر پایین رفت (" + دام.دریافت خاصیت رشته ای(رویداد، "pointerType") + ")")
پایان

تابع جابجا(رویداد: صحیح۶۴):
    اگر کشیده می‌شود:
        توپ := دام.هدف رویداد(رویداد)
        دام.تنظیم سبک(توپ، "left"، (پایه افقی + دام.رویداد افقی(رویداد) - شروع افقی) + "px")
        دام.تنظیم سبک(توپ، "top"، (پایه عمودی + دام.رویداد عمودی(رویداد) - شروع عمودی) + "px")
    پایان
پایان

تابع رها():
    کشیده می‌شود = نادرست
    دام.تنظیم متن(دام.با شناسه("info")، "اشاره‌گر بالا آمد")
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: موقعیت = نسبی عرض = 320 ارتفاع = 180 پس زمینه = "#e0f2fe" گردی کادر = 10
        جعبه: شناسه = "ball" موقعیت = مطلق چپ = 20 بالا = 20 عرض = 60 ارتفاع = 60 پس زمینه = "#0284c7"
            گردی کادر = "50%" نشانگر = گرفتن کنش لمسی = هیچ
            فشردن اشاره‌گر = بگیر حرکت اشاره‌گر = جابجا رها کردن اشاره‌گر = رها
            شروع ضبط اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("cap")، "گرفته شد") پایان
            اتمام ضبط اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("cap")، "آزاد شد") پایان
        پایان
    پایان
    پاراگراف: شناسه = "info" محتوا = "توپ را بکشید." پایان
    پاراگراف: شناسه = "cap" محتوا = "-" پایان
پایان

کشیدن دستی وقتی انتخاب بهتری است که چیز کشیده‌شده باید دقیقاً دنبال اشاره‌گر برود، مثل لغزنده، ابزار نقاشی یا بازی. کشیدن و رها کردن HTML وقتی بهتر است که چیزی تا مقصدی برده می‌شود، و تصویر کشیدن مرورگر و لغو با صفحه‌کلید را رایگان دارد.

ورود و خروج

چهار رویداد می‌گویند اشاره‌گر کجاست. ورود اشاره‌گر و خروج اشاره‌گر یک بار هنگام آمدن و رفتن رخ می‌دهند و به فرزندان عنصر کاری ندارند. عبور اشاره‌گر و بیرون رفتن اشاره‌گر بالا می‌روند، پس وقتی اشاره‌گر میان عنصر و یک فرزندش جابجا می‌شود هم رخ می‌دهند. برای افکت اشاره، ورود و خروج را انتخاب کنید. رویداد پنجم، لغو اشاره‌گر، یعنی مرورگر اشاره‌گر را از شما گرفته، بیشتر وقتی که لمس به پیمایش صفحه تبدیل شده؛ حرکت را همان‌جا تمام کنید.

web-drag-states.salam

واردسازی دام

ناپایا مسیر := ""

تابع ثبت(چه: رشته):
    اگر مسیر.طول() بزرگتر ۱۱۰: مسیر = "" پایان
    مسیر = مسیر + چه + "  "
    دام.تنظیم متن(دام.با شناسه("trail")، مسیر)
پایان

تابع دیده(رویداد: صحیح۶۴):
    ثبت("over:" + دام.دریافت خاصیت رشته ای(دام.هدف رویداد(رویداد)، "id"))
پایان

تابع رفته(رویداد: صحیح۶۴):
    ثبت("out:" + دام.دریافت خاصیت رشته ای(دام.هدف رویداد(رویداد)، "id"))
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: شناسه = "outer" عرض = 280 فاصله = 24 پس زمینه = "#ede9fe" گردی کادر = 10
        محتوا = "بیرونی"
        ورود اشاره‌گر = (): ثبت("enter") پایان خروج اشاره‌گر = (): ثبت("leave") پایان
        عبور اشاره‌گر = دیده بیرون رفتن اشاره‌گر = رفته
        لغو اشاره‌گر = (): ثبت("cancel") پایان
        جعبه: شناسه = "inner" فضا بالا = 12 فاصله = 20 پس زمینه = "#c4b5fd" گردی کادر = 8 محتوا = "درونی" پایان
    پایان
    پاراگراف: شناسه = "trail" فضای سفید = "pre-wrap" محتوا = "ماوس، قلم یا انگشت را روی جعبه‌ها حرکت دهید." پایان
پایان

در گزارش، ماوسی که از جعبه‌ی بیرونی به درونی می‌رود out:outer و بعد over:inner می‌دهد، بدون enter یا leave، چون هرگز از جعبه‌ی بیرونی خارج نشده است.

رویدادهای لمس

رویدادهای لمس اول آمدند و هنوز هستند: شروع لمس، حرکت لمس، اتمام لمس و لغو لمس. همه‌ی انگشت‌ها را می‌دهند، در حالی که رویدادهای اشاره‌گر یکی‌یکی می‌دهند. دام.لمس افقی(رویداد) و دام.لمس عمودی(رویداد) جای انگشتی را می‌خوانند که عوض شده، و touches همه‌ی انگشت‌های روی صفحه را می‌شمارد، همان‌طور که نمونه نشان می‌دهد. در اتمام لمس انگشت از touches رفته است، پس آخرین جا از انگشتِ تغییرکرده می‌آید.

ویژگی CSS به نام کنش لمسی کنار این رویدادها می‌آید. به‌طور پیش‌فرض انگشتی که روی صفحه حرکت می‌کند ممکن است صفحه را پیمایش یا بزرگ‌نمایی کند و مرورگر آنوقت حرکت شما را لغو می‌کند. کنش لمسی = هیچ روی عنصرتان می‌گوید که خودتان آن را اداره می‌کنید. اگر هنوز می‌خواهید صفحه عمودی پیمایش شود به‌جایش pan-y بنویسید.

web-drag-touch.salam

واردسازی دام

تابع بگذار(رویداد: صحیح۶۴):
    مستطیل := دام.فراخوان(دام.با شناسه("pad")، "getBoundingClientRect")
    نشانه := دام.با شناسه("mark")
    دام.تنظیم سبک(نشانه، "left"، (دام.لمس افقی(رویداد) - دام.دریافت خاصیت عددی(مستطیل، "left") - ۲۰.۰) + "px")
    دام.تنظیم سبک(نشانه، "top"، (دام.لمس عمودی(رویداد) - دام.دریافت خاصیت عددی(مستطیل، "top") - ۲۰.۰) + "px")
    دام.تنظیم سبک(نشانه، "display"، "block")
    انگشت ها := دام.دریافت خاصیت عددی(دام.دریافت خاصیت(رویداد، "touches")، "length")
    دام.تنظیم متن(دام.با شناسه("info")، "انگشت‌های روی صفحه: " + انگشت ها)
پایان

تابع بردار(چه: رشته):
    دام.تنظیم سبک(دام.با شناسه("mark")، "display"، "none")
    دام.تنظیم متن(دام.با شناسه("info")، چه)
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: شناسه = "pad" موقعیت = نسبی عرض = 320 ارتفاع = 180 پس زمینه = "#fef3c7" گردی کادر = 10
        کنش لمسی = هیچ انتخاب کاربر = هیچ
        شروع لمس = بگذار حرکت لمس = بگذار
        اتمام لمس = (): بردار("پایان لمس") پایان
        لغو لمس = (): بردار("لمس لغو شد") پایان
        محتوا = "اینجا را با انگشت لمس کنید"
        جعبه: شناسه = "mark" موقعیت = مطلق نمایش = هیچ عرض = 40 ارتفاع = 40 گردی کادر = "50%" پس زمینه = "#f59e0b" پایان
    پایان
    پاراگراف: شناسه = "info" محتوا = "منتظر لمس." پایان
پایان

پیمایش و اتمام پیمایش

پیمایش هر بار که جای یک عنصر پیمایش‌شدنی عوض شود روی آن رخ می‌دهد و یک حرکت انگشت ده‌ها رویداد می‌سازد. scrollTop، scrollHeight و clientHeight را با دام.دریافت خاصیت عددی بخوانید: اولی می‌گوید کجایید و دو تای دیگر فضای موجود را می‌دهند. نمونه این را به یک نوار پیشرفت تبدیل می‌کند. اتمام پیمایش یک بار وقتی حرکت آرام گرفته رخ می‌دهد، که لحظه‌ی ذخیره‌ی جایگاه یا بارگذاری یک تصویر است. دکمه با دام.تنظیم خاصیت عددی مقدار scrollTop را به صفر برمی‌گرداند و رفتار پیمایش = نرم آن را به یک انیمیشن تبدیل می‌کند.

web-drag-scroll-bar.salam

واردسازی دام

تابع به‌روزرسانی():
    ناحیه := دام.با شناسه("text")
    فاصله باقی := دام.دریافت خاصیت عددی(ناحیه، "scrollHeight") - دام.دریافت خاصیت عددی(ناحیه، "clientHeight")
    درصد := دام.دریافت خاصیت عددی(ناحیه، "scrollTop") * ۱۰۰.۰ / فاصله باقی
    دام.تنظیم سبک(دام.با شناسه("bar")، "width"، درصد + "%")
پایان

تابع ایستادن():
    جا := دام.دریافت خاصیت عددی(دام.با شناسه("text")، "scrollTop")
    دام.تنظیم متن(دام.با شناسه("note")، "پیمایش در " + جا + " پیکسل ایستاد.")
پایان

تابع بازگشت():
    دام.تنظیم خاصیت عددی(دام.با شناسه("text")، "scrollTop"، ۰.۰)
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 بیشینه عرض = 420 پایان
    جعبه: ارتفاع = 6 پس زمینه = "#e2e8f0" گردی کادر = 3
        جعبه: شناسه = "bar" ارتفاع = 6 عرض = "0%" پس زمینه = "#2563eb" گردی کادر = 3 پایان
    پایان
    جعبه: شناسه = "text" ارتفاع = 150 سرریز عمودی = خودکار فاصله = "0 12px" کادر = "1px solid #cbd5e1"
        رفتار پیمایش = نرم پیمایش = به‌روزرسانی اتمام پیمایش = ایستادن
        پاراگراف: تکرار = 12 محتوا = "با هر پیمایش مقدار scrollTop عوض می‌شود و رویداد پیمایش رخ می‌دهد." پایان
    پایان
    دکمه: کلیک = بازگشت محتوا = "برگرد به بالا" فضا بالا = 10 پایان
    پاراگراف: شناسه = "note" محتوا = "متن بالا را پیمایش کنید." پایان
پایان

فهرست بی‌پایان یک رویدادگیر پیمایش است که بررسی می‌کند چقدر جا مانده و وقتی کم شد مورد اضافه می‌کند. این یکی هر وقت خواننده تا ۳۰ پیکسل به ته رسید با دام.بساز و دام.افزودن پنج پاراگراف می‌افزاید.

web-drag-scroll-more.salam

واردسازی دام

ناپایا کل := ۶ برگردان صحیح۶۴

تابع بیشتر():
    فهرست := دام.با شناسه("feed")
    مانده := دام.دریافت خاصیت عددی(فهرست، "scrollHeight") - دام.دریافت خاصیت عددی(فهرست، "scrollTop") - دام.دریافت خاصیت عددی(فهرست، "clientHeight")
    اگر مانده کوچکتر ۳۰.۰:
        تکرار ۵ در ش:
            مورد := دام.بساز("p")
            دام.تنظیم متن(مورد، "مورد بارگذاری‌شده " + (کل + ش + ۱))
            دام.افزودن(فهرست، مورد)
        پایان
        کل += ۵
        دام.تنظیم متن(دام.با شناسه("count")، "تا اینجا " + کل + " مورد")
    پایان
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 بیشینه عرض = 360 پایان
    جعبه: شناسه = "feed" ارتفاع = 130 سرریز عمودی = خودکار فاصله = "0 12px" پس زمینه = "#f8fafc" کادر = "1px solid #cbd5e1" پیمایش = بیشتر
        پاراگراف: تکرار = ۶ محتوا = "یک مورد نخست" پایان
    پایان
    پاراگراف: شناسه = "count" محتوا = "تا اینجا 6 مورد" پایان
پایان

رویدادگیرهای پیمایش را سبک نگه دارید، چون بسیار پرتکرار اجرا می‌شوند. نمونه‌ی بالا حساب ساده و یک تغییر سبک می‌کند. کار کند، مثل درخواست شبکه، جایش اتمام پیمایش است که یک بار اجرا می‌شود.

پنجره و تصویرها

دو رویداد مال پنجره‌اند، نه عنصر. پیمایش روی کل صفحه و resize به پنجره فرستاده می‌شوند و زبان صفحه نمی‌گذارد کدی را به پنجره بچسبانید: ویژگی HTML فقط روی عنصر body هست که صفحه آن را نمی‌نویسد. راه‌حل این است که آن‌ها را با دام.رویداد پنجره("scroll"، ...) و دام.هنگام تغییر اندازه(...) ثبت کنید، و این ثبت را از رویداد بار شد یک تصویر یک‌پیکسلی اجرا کنید، که مرورگر به محض آماده شدن صفحه آن را رخ می‌دهد. نمونه اندازه‌ی پنجره را و یک نوار پیشرفت برای کل صفحه نشان می‌دهد.

web-drag-window.salam

واردسازی دام

تابع اندازه():
    متن := "پنجره: " + دام.عرض پنجره() + " در " + دام.ارتفاع پنجره() + " پیکسل"
    دام.تنظیم متن(دام.با شناسه("size")، متن)
پایان

تابع جایگاه():
    فاصله := دام.ارتفاع سند() - دام.ارتفاع پنجره()
    دام.تنظیم سبک(دام.با شناسه("bar")، "width"، دام.پیمایش عمودی() * ۱۰۰.۰ / فاصله + "%")
پایان

تابع راه‌اندازی():
    دام.هنگام تغییر اندازه((): اندازه() پایان)
    دام.رویداد پنجره("scroll"، (): جایگاه() پایان)
    اندازه()
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 پایان
    تصویر: جایگزین = "" عرض = 1 ارتفاع = 1 بار شد = راه‌اندازی
        نشانی = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    پایان
    جعبه: موقعیت = ثابت بالا = 0 چپ = 0 راست = 0 ارتفاع = 6 پس زمینه = "#e2e8f0"
        جعبه: شناسه = "bar" ارتفاع = 6 عرض = "0%" پس زمینه = "#16a34a" پایان
    پایان
    جعبه: فاصله = "24px 24px 600px"
        پاراگراف: شناسه = "size" محتوا = "منتظر بارگذاری صفحه." پایان
        پاراگراف: محتوا = "اندازه‌ی پنجره را عوض کنید و صفحه را پیمایش کنید. نوار بالا نشان می‌دهد چقدر پایین رفته‌اید." پایان
    پایان
پایان

رویداد بار شد کار عادی‌اش را هم روی تصویرها می‌کند، و خطا و لغو هم همین‌طور. خطا وقتی رخ می‌دهد که پرونده نتواند بار یا رمزگشایی شود، و رویدادگیر می‌تواند با دام.تنظیم ویژگی تصویری جایگزین بگذارد. لغو وقتی رخ می‌دهد که بارگذاری نیمه‌کاره متوقف شود، مثلاً چون صفحه منبع را عوض کرده است. در نمونه، تصویر دوم اصلاً تصویر نیست، پس شکست می‌خورد و صفحه آن را با یدکی عوض می‌کند. بررسی کنید که یدکی با منبع فعلی فرق داشته باشد، وگرنه یدکی خراب حلقه‌ی بی‌پایان می‌سازد.

web-drag-image.salam

واردسازی دام

پایا یدک := "data:image/gif;base64,R0lGODlhAQABAIAAAMvV4QAAACwAAAAAAQABAAACAkQBADs="

ناپایا خط ها := ""

تابع بگو(متن: رشته):
    خط ها = خط ها + متن + "\n"
    دام.تنظیم متن(دام.با شناسه("log")، خط ها)
پایان

تابع خراب():
    تصویر دوم := دام.با شناسه("second")
    اگر دام.دریافت ویژگی(تصویر دوم، "src") نابرابر یدک:
        بگو("خطا: تصویر دوم خراب است، جایگزین گذاشته شد")
        دام.تنظیم ویژگی(تصویر دوم، "src"، یدک)
    پایان
پایان

صفحه:
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه: نمایش = فلکس شکاف = 16
        تصویر: شناسه = "first" جایگزین = "یک مربع آبی" عرض = 80 ارتفاع = 80 بار شد = (): بگو("بار شد: تصویر اول رسید") پایان
            نشانی = "data:image/gif;base64,R0lGODlhAQABAIAAAAKExwAAACwAAAAAAQABAAACAkQBADs="
        پایان
        تصویر: شناسه = "second" جایگزین = "یک تصویر" عرض = 80 ارتفاع = 80 خطا = خراب
            نشانی = "data:image/png;base64,not-an-image"
            بار شد = (): بگو("بار شد: تصویر دوم دیده می‌شود") پایان
        پایان
    پایان
    پاراگراف: شناسه = "log" فضای سفید = "pre-wrap" محتوا = "" پایان
پایان

مرجع: همه‌ی رویدادهای این درس

هر رویداد یک ویژگی همگانی است و می‌تواند روی هر عنصری بنشیند، هرچند بعضی فقط روی عنصرهای خاصی معنا دارند. نمونه‌ها را مترجم بررسی کرده است. در آن‌ها لامبدا یا رشته‌ی کوتاه جاوااسکریپت به کار رفته؛ در صفحه‌ی واقعی تابعی که بالای صفحه نوشته‌اید خواناتر است. چهار رویداد این درس (اتمام کشیدن، اتمام ضبط اشاره‌گر، اتمام لمس و اتمام پیمایش) نامی فارسی دارند که با اتمام شروع می‌شود، نه پایان، چون پایان به‌تنهایی عنصر را می‌بندد.

کشیدن و رها کردن

ویژگی	چه وقت رخ می‌دهد	نمونه
`شروع کشیدن` drag start ondragstart	یک بار روی عنصری رخ می‌دهد که کشیدنش را شروع کرده‌اید. داده‌ای را که می‌خواهید همراه ببرید همین‌جا در `dataTransfer` بگذارید. عنصر باید `کشیدنی = درست` داشته باشد (تصویر و پیوند خودشان کشیدنی‌اند). فایرفاکس فقط وقتی کشیدن را شروع می‌کند که در این رویداد `setData` را صدا بزنید.	`جعبه: کشیدنی = درست شروع کشیدن = "event.dataTransfer.setData('text/plain', 'card')" محتوا = "مرا بکش" پایان`
`کشیدن` drag ondrag	در تمام مدت کشیدن بارها روی عنصر کشیده‌شده رخ می‌دهد، هر چند صد میلی‌ثانیه، حتی اگر ماوس بی‌حرکت باشد. برای شمارنده‌ی زنده یا پیش‌نمایش به کار می‌رود. برای مقصد رها کردن به‌جای آن `عبور کشیدن` را بخواهید.	`جعبه: کشیدنی = درست کشیدن = (): دام.تنظیم متن(دام.با شناسه("out")، "در حال کشیدن...") پایان محتوا = "مرا بکش" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام کشیدن` drag end ondragend	وقتی کشیدن تمام می‌شود، چه رها شده باشد چه با Escape لغو شده باشد، یک بار روی عنصر کشیده‌شده رخ می‌دهد. `dataTransfer.dropEffect` را همین‌جا بخوانید: مقدار `none` یعنی هیچ‌کس رها کردن را نپذیرفته. برای پاک کردن آنچه `شروع کشیدن` عوض کرده بود به کار می‌رود.	`جعبه: کشیدنی = درست اتمام کشیدن = (): دام.تنظیم متن(دام.با شناسه("out")، "کشیدن تمام شد") پایان محتوا = "مرا بکش" پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`ورود کشیدن` drag enter ondragenter	وقتی چیزی که کشیده می‌شود روی یک عنصر می‌آید روی آن رخ می‌دهد. برای فرزندان عنصر هم رخ می‌دهد و بالا می‌رود، برای همین رنگ‌آمیزی‌ای که در `خروج کشیدن` برداشته می‌شود ممکن است سوسو بزند؛ بررسی `relatedTarget` یا یک شمارنده این را درست می‌کند. برای مجاز شدن رها کردن باز هم `عبور کشیدن` لازم است.	`جعبه: شناسه = "zone" ورود کشیدن = (): دام.تنظیم متن(دام.با شناسه("zone")، "چیزی رسید") پایان محتوا = "ناحیه‌ی رها کردن" فاصله = 30 پایان`
`خروج کشیدن` drag leave ondragleave	وقتی چیز کشیده‌شده از یک عنصر بیرون می‌رود، و نیز وقتی روی فرزندی از آن می‌رود، روی آن رخ می‌دهد. وقتی رها کردن لغو شود هم رخ می‌دهد. با `ورود کشیدن` جفت می‌شود تا رنگ‌آمیزی را اضافه و برداشته کنید.	`جعبه: شناسه = "zone" خروج کشیدن = (): دام.تنظیم متن(دام.با شناسه("zone")، "از ناحیه بیرون رفت") پایان محتوا = "ناحیه‌ی رها کردن" فاصله = 30 پایان`
`عبور کشیدن` drag over ondragover	هر چند صد میلی‌ثانیه روی عنصری که زیر چیز کشیده‌شده است رخ می‌دهد. مرورگر رها کردن را رد می‌کند مگر این رویداد لغو شود، پس هر مقصد رها کردن باید رویدادگیری داشته باشد که `event.preventDefault()` را صدا بزند (در یک تابع `دام.جلوگیری پیش فرض(رویداد)`). رشته‌ی کوتاه جاوااسکریپت زیر همین کار را می‌کند.	`جعبه: عبور کشیدن = "event.preventDefault()" محتوا = "مقصد رها کردن" فاصله = 30 پایان`
`رها کردن` drop ondrop	وقتی کاربر چیز کشیده‌شده را روی مقصد رها می‌کند روی آن رخ می‌دهد، ولی فقط اگر `عبور کشیدن` روی همان مقصد لغو شده باشد. آنچه همراه آمده را با `dataTransfer.getData` بخوانید و `preventDefault` را صدا بزنید تا مرورگر پیوند یا پرونده‌ی رهاشده را هم باز نکند.	`جعبه: شناسه = "zone" عبور کشیدن = "event.preventDefault()" رها کردن = (): دام.تنظیم متن(دام.با شناسه("zone")، "رها شد!") پایان محتوا = "اینجا رها کنید" فاصله = 30 پایان`

اشاره‌گر

ویژگی	چه وقت رخ می‌دهد	نمونه
`فشردن اشاره‌گر` pointer down onpointerdown	وقتی دکمه‌ی ماوس فشرده می‌شود، قلم صفحه را لمس می‌کند یا انگشت صفحه را لمس می‌کند رخ می‌دهد، یک رویداد برای هر سه. `pointerType` می‌گوید کدام بوده. در کد تازه جای `mouse down` و `touch start` را می‌گیرد.	`جعبه: فشردن اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "اشاره‌گر فشرده شد") پایان محتوا = "اینجا را لمس کنید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`رها کردن اشاره‌گر` pointer up onpointerup	وقتی دکمه رها می‌شود یا انگشت یا قلم بلند می‌شود روی عنصر زیر اشاره‌گر (یا عنصری که آن را ضبط کرده) رخ می‌دهد. بعد از `لغو اشاره‌گر` رخ نمی‌دهد.	`جعبه: رها کردن اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "اشاره‌گر رها شد") پایان محتوا = "فشار بدهید و رها کنید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`حرکت اشاره‌گر` pointer move onpointermove	هر بار که اشاره‌گر روی عنصر حرکت می‌کند رخ می‌دهد، بسیار پرتکرار. جای آن را با `دام.رویداد افقی` و `دام.رویداد عمودی` بخوانید. برای دنبال کردن اشاره‌گری که از عنصر بیرون رفته، آن را در `فشردن اشاره‌گر` با `setPointerCapture` ضبط کنید.	`جعبه: حرکت اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "در حال حرکت") پایان محتوا = "روی من حرکت کنید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`ورود اشاره‌گر` pointer enter onpointerenter	یک بار وقتی اشاره‌گر روی عنصر یا یکی از فرزندانش می‌آید رخ می‌دهد. بالا نمی‌رود و جابجایی میان عنصر و فرزندانش دوباره آن را رخ نمی‌دهد، برای همین رویداد درست افکت اشاره است. در لمس هم هنگام شروع لمس رخ می‌دهد.	`جعبه: ورود اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "وارد شد") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`خروج اشاره‌گر` pointer leave onpointerleave	یک بار وقتی اشاره‌گر از عنصر و همه‌ی فرزندانش بیرون می‌رود رخ می‌دهد. بالا نمی‌رود. جفت `ورود اشاره‌گر` است. بعد از اتمام لمس هم رخ می‌دهد.	`جعبه: خروج اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "خارج شد") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`عبور اشاره‌گر` pointer over onpointerover	وقتی اشاره‌گر روی عنصر یا فرزندی از آن می‌آید رخ می‌دهد. برخلاف `ورود اشاره‌گر` بالا می‌رود و هر بار که اشاره‌گر به فرزندی می‌رسد دوباره رخ می‌دهد، پس `event.target` می‌گوید روی کدام عنصر است.	`جعبه: عبور اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "روی عنصر") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بیرون رفتن اشاره‌گر` pointer out onpointerout	وقتی اشاره‌گر از عنصر بیرون می‌رود یا روی فرزندی از آن می‌رود رخ می‌دهد. بالا می‌رود. جفت `عبور اشاره‌گر` است.	`جعبه: بیرون رفتن اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "بیرون رفت") پایان محتوا = "اشاره‌گر را بیاورید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`لغو اشاره‌گر` pointer cancel onpointercancel	وقتی مرورگر اشاره‌گر را از شما می‌گیرد رخ می‌دهد، بیشتر وقتی که لمس به پیمایش یا بزرگ‌نمایی تبدیل شده. بعد از آن `رها کردن اشاره‌گر` نمی‌آید، پس حرکت را همین‌جا تمام کنید. ویژگی CSS به نام `کنش لمسی` به مرورگر می‌گوید کدام لمس‌ها را خودتان اداره می‌کنید.	`جعبه: لغو اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "لغو شد") پایان محتوا = "لمس کنید و بکشید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`شروع ضبط اشاره‌گر` pointer capture start ongotpointercapture	پس از آنکه عنصر اشاره‌گر را با `setPointerCapture` ضبط کرد روی آن رخ می‌دهد (نام HTML آن `ongotpointercapture` است). از آن لحظه همه‌ی رویدادهای آن اشاره‌گر به همین عنصر می‌رسد، حتی وقتی اشاره‌گر خیلی دور از آن است. همین کشیدن دستی را قابل اعتماد می‌کند.	`جعبه: فشردن اشاره‌گر = "event.target.setPointerCapture(event.pointerId)" شروع ضبط اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "ضبط شد") پایان محتوا = "اینجا را فشار دهید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام ضبط اشاره‌گر` pointer capture end onlostpointercapture	وقتی عنصر ضبط اشاره‌گر را از دست می‌دهد روی آن رخ می‌دهد (نام HTML آن `onlostpointercapture` است): بعد از `رها کردن اشاره‌گر` یا `لغو اشاره‌گر`، یا وقتی `releasePointerCapture` را صدا بزنید. کشیدن را همین‌جا جمع کنید.	`جعبه: فشردن اشاره‌گر = "event.target.setPointerCapture(event.pointerId)" اتمام ضبط اشاره‌گر = (): دام.تنظیم متن(دام.با شناسه("out")، "آزاد شد") پایان محتوا = "اینجا را فشار دهید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

لمس

ویژگی	چه وقت رخ می‌دهد	نمونه
`شروع لمس` touch start ontouchstart	وقتی انگشتی عنصر را لمس می‌کند رخ می‌دهد. `دام.لمس افقی` و `دام.لمس عمودی` جای لمسی را که عوض شده می‌خوانند و `touches` همه‌ی انگشت‌های روی صفحه را فهرست می‌کند. برای رویدادگیری که با ماوس هم کار کند `فشردن اشاره‌گر` را ترجیح دهید.	`جعبه: شروع لمس = (): دام.تنظیم متن(دام.با شناسه("out")، "انگشتی لمس کرد") پایان محتوا = "اینجا را لمس کنید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`حرکت لمس` touch move ontouchmove	تا وقتی انگشتی که روی این عنصر شروع کرده حرکت می‌کند، بارها رخ می‌دهد. صفحه با همین حرکت‌ها پیمایش می‌شود مگر روی عنصر `کنش لمسی = هیچ` بگذارید؛ وقتی می‌خواهید خودتان حرکت را اداره کنید آن را بگذارید.	`جعبه: حرکت لمس = (): دام.تنظیم متن(دام.با شناسه("out")، "انگشت در حرکت است") پایان محتوا = "اینجا بکشید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام لمس` touch end ontouchend	وقتی انگشتی از صفحه بلند می‌شود رخ می‌دهد. انگشت دیگر در `touches` نیست؛ آخرین جایش در `changedTouches` است، که `دام.لمس افقی` همان را می‌خواند.	`جعبه: اتمام لمس = (): دام.تنظیم متن(دام.با شناسه("out")، "انگشت بلند شد") پایان محتوا = "اینجا را لمس کنید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`لغو لمس` touch cancel ontouchcancel	وقتی سامانه لمسی را قطع می‌کند رخ می‌دهد، مثلاً تماسی می‌رسد، مرورگر حرکت را پیمایش می‌گیرد یا انگشت‌ها خیلی زیاد می‌شوند. مثل `اتمام لمس` بدون نتیجه با آن رفتار کنید: آنچه حرکت شروع کرده بود را رها کنید.	`جعبه: لغو لمس = (): دام.تنظیم متن(دام.با شناسه("out")، "لمس قطع شد") پایان محتوا = "اینجا را لمس کنید" فاصله = 30 کنش لمسی = هیچ پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

پیمایش، پنجره و بارگذاری

ویژگی	چه وقت رخ می‌دهد	نمونه
`لغو` abort onabort	روی تصویر یا عنصر رسانه وقتی رخ می‌دهد که بارگذاری پیش از پایان متوقف شود و خطا نبوده باشد، مثلاً چون صفحه `src` را عوض کرده در حالی که پرونده‌ی اول هنوز می‌رسیده. پرونده‌ای که اصلاً بار نشود به‌جای آن `خطا` رخ می‌دهد.	`تصویر: نشانی = "/photos/large.jpg" جایگزین = "یک عکس بزرگ" لغو = (): دام.تنظیم متن(دام.با شناسه("out")، "بارگذاری متوقف شد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`خطا` error onerror	وقتی پرونده‌ی یک تصویر، اسکریپت، عنصر رسانه یا پیوند سبک نتواند بار یا رمزگشایی شود روی آن رخ می‌دهد. کاربرد رایجش گذاشتن تصویری جایگزین است. `src` تازه را فقط اگر با فعلی فرق دارد بگذارید، وگرنه جایگزین خراب حلقه‌ی بی‌پایان می‌سازد.	`تصویر: نشانی = "/photos/missing.png" جایگزین = "نشان" خطا = (): دام.تنظیم متن(دام.با شناسه("out")، "نشان بار نشد") پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`بار شد` load onload	وقتی پرونده‌ی یک تصویر، قاب یا عنصر مشابه کامل بار شد روی آن رخ می‌دهد. راه اجرای کد در آغاز صفحه هم همین است: زبان صفحه نمی‌گذارد کد را به کل پنجره بچسبانید، ولی تصویری ریز که فوراً بار می‌شود می‌تواند، همان‌طور که این نمونه برای گوش دادن به تغییر اندازه‌ی پنجره می‌کند.	`تصویر: نشانی = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" جایگزین = "" عرض = 1 ارتفاع = 1 بار شد = (): دام.هنگام تغییر اندازه((): دام.تنظیم متن(دام.با شناسه("out")، "عرض " + دام.عرض پنجره()) پایان) پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`تغییر اندازه پنجره` window resize onresize	مرورگر رویداد `resize` را فقط روی پنجره رخ می‌دهد و HTML فقط اجازه می‌دهد آن را روی عنصر `body` بنویسید که از صفحه در دسترس نیست. روی یک عنصر معمولی این ویژگی هرگز رخ نمی‌دهد. برای واکنش به تغییر اندازه‌ی پنجره از `دام.هنگام تغییر اندازه` استفاده کنید (از درون یک رویدادگیر `بار شد`، مثل اینجا) یا برای تغییر چیدمان از پرسمان رسانه.	`تصویر: نشانی = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" جایگزین = "" عرض = 1 ارتفاع = 1 بار شد = (): دام.هنگام تغییر اندازه((): دام.تنظیم متن(دام.با شناسه("size")، "" + دام.عرض پنجره()) پایان) پایان پایان پاراگراف: شناسه = "size" محتوا = "-" پایان`
`پیمایش` scroll onscroll	هر بار که جای پیمایش یک عنصر پیمایش‌شدنی عوض شود روی آن رخ می‌دهد، در یک حرکت انگشت بارها. رویدادگیر را کوچک نگه دارید. رویدادی است برای نوار پیشرفت، دکمه‌ی برگشت به بالا که دیر پیدا می‌شود، و بارگذاری موارد بیشتر نزدیک ته فهرست.	`جعبه: ارتفاع = 80 سرریز عمودی = خودکار پیمایش = (): دام.تنظیم متن(دام.با شناسه("out")، "پیمایش شد") پایان پاراگراف: تکرار = 10 محتوا = "یک سطر متن" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`
`اتمام پیمایش` scroll end onscrollend	یک بار وقتی پیمایش آرام می‌گیرد رخ می‌دهد، یعنی بعد از بلند شدن انگشت و تمام شدن شتاب یا پیمایش نرم. از `پیمایش` جدیدتر است و سافاری آن را آخر از همه افزوده، پس مرورگرهایی را که باید پشتیبانی کنید بررسی کنید. برای کاری است که باید تا ایستادن حرکت صبر کند، مثل ذخیره‌ی جایگاه.	`جعبه: ارتفاع = 80 سرریز عمودی = خودکار اتمام پیمایش = (): دام.تنظیم متن(دام.با شناسه("out")، "پیمایش ایستاد") پایان پاراگراف: تکرار = 10 محتوا = "یک سطر متن" پایان پایان پاراگراف: شناسه = "out" محتوا = "-" پایان`

خودتان امتحان کنید

فهرست مرتب‌شونده را به فهرست کارها تبدیل کنید: فهرست دومی به نام انجام‌شده، که رها کردن روی آن ردیف را به آن‌جا می‌برد و خط می‌کشد روی متنش.
به نمونه‌ی اشاره‌گر یک لغزنده بیفزایید: یک مسیر و یک دستگیره که فقط به پهلو کشیده می‌شود، و پاراگرافی که مقدار را از ۰ تا ۱۰۰ نشان می‌دهد.
نمایشگاهی از سه تصویر بسازید که در آن نام پرونده‌ی دومی غلط است. با رویداد خطا برایش یک یدکی خاکستری بگذارید.
نوار پیشرفت پیمایش را با اتمام پیمایش ترکیب کنید تا جای متن وقتی خواننده می‌ایستد در دام.تنظیم عدد ذخیره ذخیره شود.